jq+scroll滚动加载

一  、

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

猜你喜欢

转载自blog.csdn.net/github_39598787/article/details/83991834