JS滚动到底部监听 window.innerHeight 和 document.body.clientHeight 坑

源代码在：https://github.com/BadWaka/waka-ui/blob/master/h5/scrollToBottom.html

关于实现JS监听页面滚动到底部的需求，网上的绝大部分文章都是给出这样一个公式

clientHeight + scrollTop = scrollHeight

其实，这个公式是没问题的，但是它的适用范围是元素自带滚动条的时候，就是需要配合 css 属性 overflow 才顶用

而大部分需要监听滚动到底部的页面，是一个整体，就是文档的内容自动把浏览器撑开，浏览器自动地加上滚动条；这个时候 document.body.clientHeight 这个属性就不顶用了，就需要用到 window.innerHeight 来获取浏览器可视区域的高度。

下面我会用实际的例子来说明：

页面效果如下：

HTML代码如下：

    
    
    
    



    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123
    
123

打开控制台，滚动到底部，可以看到 document.body.clientHeight 和 document.body.scrollHeight 是相等的，而当滚动到底部的时候
window.innerHeight + document.body.scrollTop 刚好等于 document.body.scrollHeight
667 + 499 === 1166