JS滚动到底部监听 window.innerHeight 和 d

作者: waka | 来源:发表于2017-09-26 11:18 被阅读408次

JS滚动到底部监听 window.innerHeight 和 d
js,jq获取屏幕各种宽高尺寸
js窗口尺寸获取常用属性
前端常见需求
(Kotlin)监听ScrollView是否滚动到底部
NestedScrollView的滚动监听,滚动到指定位置
vue监听滚动事件实现滚动监听
JS监听是否滚动到底部
Vue滚动底部分页实现
el-table滚动加载数据

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

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

clientHeight + scrollTop = scrollHeight

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

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

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

页面效果如下：

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听滚动到底部</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        body, ul {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<ul id="scrollUl" class="scrollUl">
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
    <li class="tabItem">123</li>
</ul>
<script>
    window.onload = function () {
        window.addEventListener('scroll', function () {
            // document.body.clientHeight
            console.log('document.body.clientHeight', document.body.clientHeight, document.body.scrollTop, document.body.scrollHeight);
            // window.innerHeight
            console.log('window.innerHeight', window.innerHeight, document.body.scrollTop, document.body.scrollHeight);
        });
    }
</script>
</body>
</html>

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