Jquery实现页面下拉滚动加载内容

PetitQ HTML/CSS 2018-11-08 3.73K 0 1

最近要新写一个手机项目，感觉上面不是用得很舒服，然后就新写了一个，改动不是很大。

判断到底部

```
$(window).scroll(function () {
```

    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {

```
        alert("哦哦,到底了.");
```
```
    }
```
```
});
```

也想出现在这里？联系我们吧

如果要实现拉到底部自动加载内容。只要注册个滚动条事件：
首先，我们拉动滚动条，从最上面拉到最下面，变化的是 scrollTop 的值，而这个值是有一个区间的。这个区间是： [0, (offsetHeight – clientHeight)]即，滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。

1、判断滚动条滚动到最底端： scrollTop == (offsetHeight – clientHeight)

2、在滚动条距离底端 50px 以内： (offsetHeight – clientHeight) – scrollTop < = 50 3、在滚动条距离底端 5%以内： scrollTop / (offsetHeight – clientHeight) >= 0.95

```
scrollBottomTest =function(){
```
```
     $("#contain").scroll(function(){
```
```
         var $this =$(this),
```

         viewH =$(this).height(),//可见高度

         contentH =$(this).get(0).scrollHeight,//内容高度

         scrollTop =$(this).scrollTop();//滚动高度

        //if(contentH - viewH - scrollTop < = 100) { //到达底部100px时,加载新内容

        if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容

```
        // 这里加载数据..
```
```
        }
```
```
     });
```
```
}
```

判断垂直滚动条是否到达底部理清了以上的概念，编码其实就比较简单了，以下是示例代码：

      <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script>

```
      <script language="javascript">
```
```
      $(document).ready(function (){
```

        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)

        var nScrollTop = 0;   //滚动到的当前位置

        var nDivHight = $("#div1").height();

```
        $("#div1").scroll(function(){
```

          nScrollHight = $(this)[0].scrollHeight;

          nScrollTop = $(this)[0].scrollTop;

          if(nScrollTop + nDivHight >= nScrollHight)

            alert("滚动条到底部了");

```
          });
```
```
      });
```
```
      </script>
```
```
    <body>
```

    <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">

      <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>

```
    </div>
```
```
</body>
```

内部 div 高度为 750，外部 div 高度为 500，所以垂直滚动条需要滚动 750-500=250 的距离，就会到达底部，参见语句nScrollTop + nDivHight >= nScrollHight。程序中，在外部 div 的 scroll（滚动）事件中侦测和执行 if 判断语句，是非常消耗 CPU 资源的。用鼠标拖拉滚动条，只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多，所以滚动条的 scroll 事件要谨慎使用。