为了账号安全,请及时绑定邮箱和手机立即绑定

页面一滚动就显示“已经到达底端”

页面只要滚动就显示到底部了(谷歌浏览器)

<!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>


正在回答

1 回答

重新试了一下,把<!DOCTYPE html>里面的html去掉就好了,请问大家谁知道是什么原因吗?

0 回复 有任何疑惑可以回复我~
#1

慕林溪

2-7/8有说明原因,这是因为火狐把body作为一个div来处理了,它的高不被认为是整个页面的高,而是它的内容撑起来的高,所以当你求document.body.scrollHeight时,它的值就只是它包裹的div的高,一开始就已经比浏览器可视窗口的高要小了,那么你一滑动满足这个(clients+scrollTop>=wholeHeight)条件,当然就马上alert了... 当你去掉了html之后,火狐就不再把body作为一个div处理,它的document.body.scrollHeight变为了页面的高,结果正确了
2018-06-20 回复 有任何疑惑可以回复我~
#2

慕林溪

另外:关于前面body的document.body.scrollHeight只等于里面的div的高,而没有包括div的margin的问题,提问的第二条有人有详细的解释
2018-06-20 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS/jQuery宽高的理解和应用
  • 参与学习       34058    人
  • 解答问题       58    个

js/jquery各种宽高的理解,结合实例对宽高做一些简单的应用

进入课程

页面一滚动就显示“已经到达底端”

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信