前端开发常常会遇到监听窗口滚动事件的状况，检测到页面滚动间隔做一些操作。有时候也会监听一些容器的滚动如：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滚动高度》