页面回滚效果（滚动条到底部刷新页面）

Posted 2020-08-22 黑咖啡1

jquery滚动监听方法如下，

$(window).scroll(function(){

  　　var scrollTop = $(this).scrollTop();

  　　var scrollHeight = $(document).height();

  　　var windowHeight = $(this).height();

  　　if(scrollTop + windowHeight == scrollHeight){

  　　　　alert("you are in the bottom");

  　　}

  });

 

在实际的应用中，比如微博、qq空间等有这样的效果，打开首页默认显示几条，但我们的鼠标将滚动条下滑到底部时，加载出更多的内容，这个方法是如何实现的？

通关的demo，simple-weibo中有这样一个要求，个人采用了ajax及jquery的scroll方法一起实现了这个效果，思路如下：

1、设置滚动条监听事件，如上所示

2、当scrollTop + windowHeight == scrollHeight时，alert替换成ajax方法，从后端返回需要吐出的数据，

具体如下

$.ajax({ 
　　type: ‘POST‘,
　　url: "pub.php",

　　data:id,　　//比如首页默认显示10条，从param中获取参数，比如设为1、2、3表示滚动到底部，sql跳过10条取n条。

　　success: function(data) { 
　　　　$("#moreinfo").before(data);

　　　　history.go(0);   //使得显示的是数据库中的数据
　　},
　　fail: function() {
　　　　alert(‘请求失败！‘);
　　}
});

因为不需要数据，所以ajax方法中没有提到data，success中的data是从pub.php中返回的数据。

过程中遇到了问题，因为每次到底部时，只加载出了一条消息，因为用的是ajax，此处的DOM是假数据，并未真正存在与html中，只有刷新了，显示的才是从数据库中取出的数据。另外，因为默认显示的列表中，为了使得每次加载出的数据都从最下面显示，我们可以建一个<div id="moreinfo"></div>但是什么也不写，只是为吐数据的before方法提供支撑。具体原因可以理解！