一次项目scrollTop的小记,为body添加了onscroll的时候scrollTop一直是0,使用下面的方法
// documentElement 属性以一个元素对象返回一个文档的文档元素
document.documentElement.scrollTop || document.body.scrollTop
只是针对于body的时候会是0,我直接写了个box,就可以直接使用,出现这个如果是body不能使用的原因是应该是没有选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll</title>
</head>
<style>
#container {
width: 300px;
height: 200px;
overflow-y: scroll;
border: 1px solid red;
}
</style>
<body>
<div id="container">
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box" onclick="aclick()" style="color: red;font-weight:bold;font-size: 26px;">到底了</div>
</div>
<script>
let container = document.querySelector('#container')
console.log(container.scrollHeight)
container.onscroll = function (e) {
console.log(container.scrollTop)
}
function aclick() {
container.scrollTop = 0
}
</script>
</body>
</html>
下面的代码是滚动整个body的时候一直为0的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll</title>
</head>
<body>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box">scroll</div>
<div class="box" onclick="aclick()" style="color: red;font-weight:bold;font-size: 26px;">到底了</div>
<script>
let body = document.querySelector('body')
body.onscroll = function(e) {
console.log(body.scrollTop)
console.log(document.documentElement.scrollTop) // 这个是可以打印出来
}
function aclick() {
document.documentElement.scrollTop = 0
}
</script>
</body>
</html>