JS如何判断滚动条是否滚到底部

JS如何判断滚动条是否滚到底部

背景

通常我们需要判断滚动条是否滚到底部，以实现相应的功能，如“加载更多”等。

那么如何通过js来判断滚动条是否滚到底部，请看以下方法

解决方案（以纵向滚动条为例，横向滚动条方法类似）

判断滚动条到底部，需要用到DOM的三个属性值，即clientHeight、scrollTop、scrollHeight。（横向滚动条则是clientWidth，scrollLeft，scrollWidth）

clientHeight为内容可视区域的高度。

scrollTop为滚动条在Y轴上的滚动距离。

scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即：

clientHeight + scrollTop === scrollHeight

const dom = document.getElementById('scrollElement');dom.addEventListener('scroll', () => {const clientHeight = dom.clientHeight;const scrollTop = dom.scrollTop;const scrollHeight = dom.scrollHeight;if (clientHeight + scrollTop === scrollHeight) {console.log('竖向滚动条已经滚动到底部')}})

如果觉得《JS如何判断滚动条是否滚到底部》对你有帮助，请点赞、收藏，并留下你的观点哦！