一 、
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