监听div滚动高度

前端开发经常会遇到监听窗口滚动事件的情况，检测到页面滚动距离做一些操作。有时候也会监听一些容器的滚动如：div，与前者有一些差别，本文会先后介绍这两种情况如何实现。

监听窗口的滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window滚动事件</title>
</head>
<body style="height: 2000px;">

<button onclick="scrollWindow()" style="position: fixed; bottom: 0px;">返回顶部</button>

<script>
// 想在页面滚动的时候获取相关信息，试试下面的操作
window.onscroll = () => {
    console.log('document.documentElement.scrollTop:', document.documentElement.scrollTop)
    // todo 处理具体的页面逻辑
}

function scrollWindow() {
    document.documentElement.scrollTop = 0
}
</script>
</body>
</html>

监听div容器的滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 200px;
            width: 300px;
            overflow: scroll;
            width: 300px;
            background-color: aliceblue;
        }

        .content {
            width: 100%;
            height: 400px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="content">
          比父级高的容器
        </div>
    </div>
    <div>
        <textarea id="text"></textarea>
    </div>
    <button onclick="append()">send</button>
    <button onclick="toTop()">toTop</button>
    <script>
        var element = document.getElementById('box');

        element.addEventListener('scroll', function(e) {
            console.log('e.target.scrollTop:', e.target.scrollTop)
        })

        function toTop() {
            element.scrollTop = 0
        }

        function append() {
            let p = document.createElement("p");
            let val = document.getElementById('text').value
            var textnode=document.createTextNode(val);
            p.appendChild(textnode);
            element.appendChild(p)
            document.getElementById('text').value = ''
            // 滚动到底部
            element.scrollTop = element.scrollHeight;
        }
        
    </script>
</body>
</html>

可以看出，父容器需要设置有限的高度且overflow: scroll; 当子元素的高度超过父级才会出现滚动条。这样父级滚动触发scroll事件。

让父容器回到顶部只需设置element.scrollTop = 0即可。

有一些聊天室的场景，想要最新消息出现在容器底部设置element.scrollTop = element.scrollHeight;即可。

文章首发于我的博客-《监听div滚动高度》

web开发总结

不积跬步无以至千里

监听div滚动高度

监听窗口的滚动

监听div容器的滚动

web开发总结

来了老弟

onMounted is called when there is no active component 已解决

涨姿势了，有意思的气泡 Loading 效果

在前端使用 JS 进行分类汇总

你可能不需要JS！CSS实现一个计时器

「彻底弄懂」this全面解析

学会这些 Web API 使你的开发效率翻倍

用了那么久的 SVG，你还没有入门吗？

来了老弟