监听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>Documenttitle><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()">sendbutton><button onclick="toTop()">toTopbutton><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').valuevar 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滚动高度》
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！