<>js监听页面滚动

在项目中要实现查看分页加载的列表数据时,尤其是移动端,经常有下滑到底部加载更多的场景,可以通过滚动监听来实现。

代码如下:
window.addEventListener('scroll', this.handleScroll, true) handleScroll () {
let scrollTop = document.getElementsByClassName('滚动的元素')[0].scrollTop;
console.log('【滚动距离】', scrollTop); let ch =
document.getElementsByClassName('strategy-box')[0].clientHeight;
console.log('【可视区域】', ch); let sh =
document.getElementsByClassName('strategy-box')[0].scrollHeight;
console.log('【滚动条高度】', sh); /*scrollTop + ch = sh*/ }
稍稍解释:
addEventListener监听滚动,绑定触发函数handleScroll,执行事件代码。
滚动距离scrollTop + 可视区域高度ch = 总高度sh

意义:当滚动距离scrollTop + 可视区域高度ch = 总高度sh时,则滚动条滚动到底部,可以执行相关事件代码,如列表滚动到底部自动加载更多等。

end

比较笼统简单,如果对你有帮助,记得点赞噢(~~)

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信