js监听页面滚动

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*/
        }
1
2
3
4
5
6
7
8
9
10
11

稍稍解释：
addEventListener监听滚动，绑定触发函数handleScroll，执行事件代码。
滚动距离scrollTop + 可视区域高度ch = 总高度sh

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

end

比较笼统简单，如果对你有帮助，记得点赞噢（~~）