如何监测html元素的scroll bottom事件

• 不存在scrollBottom事件

有很多场合我们需要scrollBottom事件来监测滚动条是否滚动到页面或者父元素底部。例如页面的lazy load，当滚动到底部时自动加载一部分内容。但是html dom本身是没有这个事件的。同样，以操作dom闻名的jquery也没有提供支持。

• 下面是我总结的方法，如有不对请多多指教。

• 1.准备知识

scrollHeight属性，表示元素内部的内容的高度。

$(dom)表示jquery选定的元素，$(dom).scrollTop(),此方法返回内容滚动过的距离。传入数字参数可以设定这个距离，且当参数 小于等于0时，滚动条滚动到顶部；

反之，当参数高于元素实际内容高度时，滚动条滚动到底部。

$(dom).height()返回元素显示区域的高度。

下图标注了上面三个高度的具体含义。

• 2.理解了上面的知识，我们接下来要做的事情就很简单了。

从上图可知，当滚动条向下滚动时，scrollTop不断变大，当滚动到底部时，scrollTop+height的和刚好和scrollHeight相等。所以我们只需要在元素的scroll事件中对这三个值做此比较就可以了。

• 3. 简单的控制scroll bar到底部或者顶部。

到顶部：$(dom).scroll(0)

到底部：$(dom).scroll(Number.MAX_SAFE_INTEGER)。设定一个不可能到达的值，滚动条就乖乖滚到最下面了。