代码:
<!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 type="text/css">
*{
margin: 0;
padding: 0;
}
.a{
height: 100vh;
background-color: rebeccapurple;
}
.b{
height: 100vh;
background-color: aqua;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<script>
document.addEventListener("wheel",(e)=>{
console.log(document.scrollingElement.scrollTop);
console.log(document.scrollingElement.clientHeight);
console.log(document.scrollingElement.scrollHeight);
if(document.scrollingElement.scrollTop+document.scrollingElement.clientHeight==document.scrollingElement.scrollHeight){
console.log("123");
}
})
</script>
</body>
</html>
效果:
注意事项:
1.断判要放在滚轮事件中否则只判断一次发现不行然后就没了
参考文章:
使用document.scrollingElement控制窗体滚动高度
Element.scrollHeight
Element.clientHeight
彻底搞懂clientHeight、offsetHeight、scrollHeight的区别