jq+scroll滚动加载_jquery 滚动加载-优快云博客

一、

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

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

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

实际上，在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