js实现了判断滚动条滚动到页面底部并执行事件的方法。

js实现了判断滚动条滚动到页面底部并执行事件的方法。
你需要知道的三个DOM元素:自己,offsetheight,和scrollTop。

自己:这个元素的高度占整个空间的高度,所以如果一个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的底部,添加新的内容

在这里加载数据。

}

});

}

tag:事件执行滚动条方法实现了

相关内容