Front-end development often encounters the situation of listening to window scrolling events, detecting the scrolling distance of the page and doing some operations. Sometimes it also monitors the scrolling of some containers such as div, which is different from the former. This article will introduce how to realize these two situations.
Monitor window scrolling
<!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>
Listen to the scrolling of the div container
<!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>
It can be seen that the parent container needs to set a limited height and overflow: scroll; when the height of the child element exceeds the parent level, the scroll bar will appear. This way the parent scrolling triggers the scroll event.
Getting the parent container back to the top is just a matter of setting element.scrollTop = 0.
There are some chat room scenarios, if you want the latest news to appear at the bottom of the container, just set element.scrollTop = element.scrollHeight;
The article first appeared on my blog - "Monitor div scroll height"