程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> javascript-js如何判斷浏覽器滾動條滾動到了底部?

javascript-js如何判斷浏覽器滾動條滾動到了底部?

編輯:編程解疑
js如何判斷浏覽器滾動條滾動到了底部?
 <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width, user-scalable=no">
    </head>

    <body>

        <div id="part1" style="height:2000px;overflow: auto;background: lightblue;">
        </div>
                <div id="part2" style="height:3000px;overflow: auto;background:lightcoral;">
        </div>
        <script>
            console.info(document.body.scrollHeight);
            console.info(document.body.clientHeight);
            console.info(document.body.offsetHeight);

            var d = document.getElementById("part1").offsetHeight;
            console.info(d);

            window.addEventListener("scroll", function(event) {
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                console.log(scrollTop);            
            });
        </script>
    </body>

</html>

寫了這個簡單的demo測試。
我想通過 scrollTop 與 scrollHeight 比對來判斷是否滾動到底部,但是發現當滾到 part1底部的時候 scrollTop 是1700多,part1的高度為2000px。
當滾到 part2底部的時候 scrollTop 是4300多,part2的高度為3000px,總體body的高度應該為5000px。
這裡面的 200多 和 600多 都是被什麼給占了。。。
要說滾動條(scrollbar)也不可能有那麼高,
看得我一愣一愣的完全不明白了。

最佳回答:


CSS1Compat獲取可是高度是document.documentElement,不是document.body

 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
</head>

<body>

    <div id="part1" style="height:2000px;overflow: auto;background: lightblue;">
    </div>
    <div id="part2" style="height:3000px;overflow: auto;background:lightcoral;">
    </div>
    <script>
        var viewHeight = document[document.compatMode == 'CSS1Compat'?'documentElement':'body'].clientHeight;
        var scrollHeight = document.body.scrollHeight;
        var timer;
        window.addEventListener("scroll", function (event) {
            var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
            timer = clearTimeout(timer);
            if (scrollTop + viewHeight >= scrollHeight)console.log('at Bottom');
        });
    </script>
</body>

</html>
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved