监听滚动条触底。作为记录。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
p {
user-select: none;
background: seagreen;
padding: 20px;
}
p:first-child {
background: salmon;
}
p:last-child {
background: orchid;
}
</style>
<title>测试下拉滚动条</title>
</head>
<body>
<p>11111111111111111</p>
<p>22222222222222222</p>
<p>33333333333333333</p>
<p>44444444444444444</p>
<p>55555555555555555</p>
<p>66666666666666666</p>
<p>77777777777777777</p>
<p>88888888888888888</p>
<p>99999999999999999</p>
<p>11111111111111111</p>
<p>22222222222222222</p>
<p>33333333333333333</p>
<p>44444444444444444</p>
</body>
<script>
window.onload = () => {
//获取滚动条距离顶部的距离;
function getScrollTop() {
let scrollTop = document.documentElement.scrollTop;
console.log("距离顶部的高度：" + scrollTop);
return scrollTop;
}
//获取可视范围的高度
function getClientHeight() {
var clientHeight = 0;
console.log(document.body.clientHeight+",,,,,,,"+document.documentElement.clientHeight);
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
console.log("可视区域高度："+clientHeight);
return clientHeight;
}
//获取文档高度
function getScrollHeight() {
var eleHeight;
eleHeight=Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
console.log("文档高度："+eleHeight);
return eleHeight;
}
window.onscroll = () => {
getScrollTop();
getClientHeight();
getScrollHeight();
if(getScrollTop()+getClientHeight() == getScrollHeight()){
console.error("到底了");
}
}
}
</script>
</html>