js实现了判断滚动条滚动到页面底部并执行事件的方法。
自己:这个元素的高度占整个空间的高度,所以如果一个div有滚动条,高度不包括下面的滚动条的部分,只是一个简单的div的高度
OffsetHeight:它指的是该元素的含量的高低。根据以上,高度在div的高度,包括有形的和无形的部分下的滚动条。
ScrollTop:这是什么他能理解滚动条的长度。
例如,如果一个div高度400px(即自己是400),和里面的内容是一个很长的列表,内容高度1000px(即offsetheight 1000)。所以,在可见光部分,我们看到400px,和1000px内容是不可见的,这部分600px。看不见的是我们能做些什么来拉动滚动条显示这一部分,如果你不拉滚动条,这个时候scrollTop是0,如果你拉动滚动到最后,显示列表的底部,而在这个时候,scrollTop是600。所以对scrollTop值范围{ 0, 600 }。所以这600可以理解为滚动条可以滚动的长度。
理解以上概念后,判断是否滚底是好的。
首先,我们把滚动条从上到下,改变scrollTop值,这个值有一个间隔。
这个区间是:{ 0,(offsetheight -自己)}
这是由滚动条驱动的全过程,其范围在0到(offsetheight -自己)。
1、确定滚动条滚动至底部:scrollTop =(offsetheight -自己)
2,底部比50px少距离的滚动条:(offsetheight -自己)- scrollTop 50
3、滚动底部距离小于5% scrollTop /(offsetheight -自己)> = 0.95
以上。
如果是被拉到底部,内容自动加载。只登记一个滚动条事件:
复制代码代码如下所示:
scrollbottomtest =函数(){
$(#包含)。滚动(函数(){)
var $ = $(这个),
viewh = $(this)(的高度),可见/高度
contenth = $(this),得到(0)。scrollheight /高度
scrollTop = $(this)(。scrollTop); / /滚动的高度
/ /如果(contenth - viewh - scrollTop <= 100){ / / 100px达到底部,添加新的内容
如果(scrollTop /(contenth - viewh){ / / > = 0.95)达到100px的底部,添加新的内容
在这里加载数据。
}
});
}