js两种滚动事件写法
js两种滚动事件写法,一种可判断滚动条滚动方向,一种只判断可视区底部到页面底部的距离,即滚动条底部到可视区底部的距离。
·
方式一:可判断滚动条滚动方向。
$(window).scroll(() => {
// 滚动条距文档顶部的距离, || 是做兼容处理的
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// 滚动条滚动的距离
let scrollStep = scrollTop - this.oldScrollTop
// 更新-滚动前,滚动条到文档顶部的距离
this.oldScrollTop = scrollTop
if (scrollStep > 0) {
// console.log('滚动条向下滚动')
}
else {
// console.log('滚动条向上滚动')
}
})
根据滚动条滚动的距离是否大于 0 来判断向上还是向下滚动。不太适合用于下滚无限加载,因为加载需要有固定的底部距离,此写法不太好确定,效果一般。
方式二:只判断滚动条底部到可视区底部的距离,即可视区底部到页面底部的距离,因此方向是只向下的。
$(window).scroll(() => {
let scrollH = document.body.scrollHeight
let scrollT = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
let clientH = document.documentElement.clientHeight
let instance = scrollH - scrollT - clientH
if (instance < 50) {
// console.log('滚动条向下滚动')
}
})
两种方式对于向下滚动没有大的区别,第二种方向是专门针对向下滚动的,用于下滚无限加载很简单实用。
更多推荐
已为社区贡献2条内容
所有评论(0)