<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="scrolldiv"></div>
<style type="text/css">
.scrolldiv{
width: 500px;
height: 400px;
margin: 1000px auto 100px auto;
background-color: red;
}
</style>
<script type="text/javascript">
function scrllB(){
var clients=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
var scrollTop=document.body.scrollTop;
var whHeight=document.body.scrollHeight;
if(clients+scrollTop>=whHeight){
alert("到底部了")
}
if(scrollTop==0){
alert("顶部")
}
}
window.onscroll=scrllB;
</script>
</body>
</html>
问题原因:打开浏览器F12 查看body元素可以发现，发生了父子元素间垂直外边距合并问题
【父子元素间垂直外边距合并】现象
父元素的上（下）margin会和子元素上（下）发生合并，值为两者之间最大的那个值，且这个值会成为父元素的上(下）margin
【父子元素间垂直外边距合并】触发条件：
父元素木有设置边框（1）或则padding（2），并且子元素前面（3）或则后面（4）都没有另外一个子元素（只要打破1或则2，又或则3和4一起打破，就能防止发生这种现象）
解决办法有两个：
方法一:因为发生了父子元素间垂直外边距合并问题，此时body的scrollHeight不再是整个文档的高度，但html(document.documentElement)的scrollHeight仍然是整个文档的高度，So
var whHeight=document.documentElement.scrollHeight;
方法二：解决父子元素间垂直外边距合并问题，So我们需要修改style
body{margin:0;}
//因为scrollDiv只设置了上外边距，所以这里只需要设置一个before，如果还设置了下边距,可以用:after
body::before{
content:'';
display:'table';
}以上，希望能帮到这位道友