方式一：可判断滚动条滚动方向。
$(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 来判断向上还是向下滚动。不太适合用于下滚无限加载，因为加载需要有固定的底部距离，此写法不太好确定，效果一般。
方式二：只判断滚动条底部到可视区底部的距离，即可视区底部到页面底部的距离，因此方向是只向下的。文章来源：https://www.toymoban.com/news/detail-507853.html
$(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('滚动条向下滚动')
}
})两种方式对于向下滚动没有大的区别，第二种方向是专门针对向下滚动的，用于下滚无限加载很简单实用。文章来源地址https://www.toymoban.com/news/detail-507853.html
到了这里，关于js两种滚动事件写法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
