jq+scroll滚动加载

﹏ヽ暗。殇╰゛Y 2022-04-17 03:11 317阅读 0赞

一  、

objHeight： 滚动对象的实际高度；

scrollHeight： 滚动对象需要滚动的整个高度；

scrollTop：滚动条所要滚动的高度占滚动对象整个需要滚动高度的比例。

![24230406-ca05a89e64ea461b9de724957b698511.gif][]

**实际上，在js代码里，滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”（b），而是表示滚动条需要滚动的高度，即内部所有li的高度。而scrollTop表示滚动条（一个点）当前的位置在素有li高度里占了多少，不是图中标出的a。**

var objHeight = $("ul").height(),
    	scrollHeight = 0,
    	scrollTopHeight = 0;
    $('ul').scroll(function () {
    	scrollHeight = $(this)[0].scrollHeight;
    	scrollTopHeight = $(this)[0].scrollTop;
    	if ( objHeight + scrollTopHeight >= scrollHeight - 0.1){
            //条件中减1px是为了触发判断。按照逻辑，objHeight + scrollTopHeight == scrollHeight 的        
              时候，对象已滚动到底部了，但是未触发判断，但减去任意一个px值则触发。
    
            alert("已经到底部了")
            //数据加载部分
        }
    })
    
    <ul style="overflow-y:auto; overflow-x:hidden; height:500px;">
        <li></li>			
        <li></li>	
        <li></li>	
        <li></li>			
    </ul>

注：

1、

程序中，在外部div的scroll（滚动）事件中侦测和执行if判断语句，是非常消耗CPU资源的。用鼠标拖拉滚动条，只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。  
    本示例判断的是没有水平滚动条的情况，在有水平滚动条时，情况会有细小的变化，所以nScrollTop + nDivHight >= nScrollHight语句中，需要用“>=”比较运算符，而没有水平滚动条的时候，等号“=”就足够了。还可以判断水平滚动条是否滚动到头了。

2、

jquery对象$(this)\[0\]等同于JS里的元素this，JS里的元素只要包上$()就是jquery对象了，而jquery的对象只要加上\[0\]或者.get(0)，就是js元素了。

$(this)是jquery对象，this就是简单指当前元素。jquery对象不能直接指定元素的属性（ele.style），需要get（index）或者直接（index）取得对象中元素才行。

JQuery中的 $() 这个符号，实际上这个符号在JQuery中相当于JQuery（），即$(this)=jquery(this);
    也就是说，这样可以返回一个jquery对象。那么，当你在网页中alert($('#id'));时，会弹出一个[object Object ]，这个object对象，也就是jquery对象了。

3、

在很多地方，我们都会看到   
var $this = $(this)的代码，那它到底是什么意思，有什么用呢？

this其实是一个html 元素。   
$this 只是个变量名，加$是为说明其是个jquery对象。   
而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。

作用：把当前对象保存起来，便于后边的使用。

转载并整理：[https://www.cnblogs.com/dingyingsi/archive/2013/09/24/3337813.html][https_www.cnblogs.com_dingyingsi_archive_2013_09_24_3337813.html]

[24230406-ca05a89e64ea461b9de724957b698511.gif]: /images/20220417/a61a8061139748c790b2bd83965e4dbd.png
[https_www.cnblogs.com_dingyingsi_archive_2013_09_24_3337813.html]: https://www.cnblogs.com/dingyingsi/archive/2013/09/24/3337813.html