js判断dom元素滚动条到达底部的算法

示意图

前置条件

1. Element.scrollHeight：Element是Element只读属性，是Element实际内容高度，包括溢出导致的视图中不可见内容；

2. Element.scrollTop，scrollTop是Element可编辑属性，表示滚动条可滚动的高度；

3. Element.getBoundingClientRect()，可以获取Element的可视高度

打印后你会惊奇发现：

Element.scrollHeight = Element.scrollTop + Element.getBoundingClientRect().height

这就是计算Element出现滚动条，且滚动到底部区域的关键关系。

按理论，元素滚动条滚动到底部判断应该等于

实际开发中开发者都会刻意留小段底部区域，用于判断滚动条到达底部的依据，避免精确判断后触发概率较小的问题，比如下面这样写，可以提前80px知道，滚动条进入了底部区域。

为了减少滚动条触发频率，采用防抖技术

整合代码如下

好了今天分享到这里，不清楚的小伙伴可以留言讨论。