页面一滚动就显示“已经到达底端”
页面只要滚动就显示到底部了(谷歌浏览器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动到顶端或底端判断</title>
<style>
#showDiv{
width: 200px;
height: 200px;
margin-top: 2400px;
background-color: red;
}
</style>
</head>
<body>
<div id="showDiv"></div>
<script>
function scrollBottomOrTop() {
var clients=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;//可视区域
var scrollTop=document.body.scrollTop;//滚动的距离
var wholeHeight=document.body.scrollHeight;//整个高度
if(clients+scrollTop>=wholeHeight){
alert("已经到达底端")
};
if(scrollTop==0){
alert("已经到达顶端")
};
}
window.onscroll=scrollBottomOrTop;
</script>