各大瀏覽器下scrollTop的兼容

jerryloveemily 發布于2019-08-26 14:05 / 1122人閱讀

摘要：而其他瀏覽器無論賦值或運算順序如何都不會返回可以安全使用所以說到頭還是的問題咯杯具精神有點恍惚，不知道有沒有表達清楚。

$(window).unbind("scroll").bind("scroll", function () {
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset ||                                                     
    document.body.scrollTop;
    if ($("").height() - scrollTop <= document.documentElement.clientHeight) {
    }
});

1、各瀏覽器下 scrollTop的差異
IE6/7/8：
對于沒有doctype聲明的頁面里可以使用? document.body.scrollTop 來獲取 scrollTop高度；
對于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop；
Safari:
safari 比較特別，有自己獲取scrollTop的函數： window.pageYOffset ；
Firefox:
火狐等等相對標準些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop ；
2、獲取scrollTop值
完美的獲取scrollTop 賦值短語：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通過這句賦值就能在任何情況下獲得scrollTop 值。
仔細觀察這句賦值，你發現啥了沒？？
沒錯，就是 window.pageYOffset? (Safari)?? 被放置在 || 的中間位置。
因為當數字0 與 undefine 進行或運算時，系統默認返回最后一個值。即或運算中 0 == undefine ;
當頁面滾動條剛好在最頂端，即scrollTop值為 0 時。? IE 下 window.pageYOffset? (Safari) 返回為 undefine ，此時將window.pageYOffset? (Safari) 放在或運算最后面時， scrollTop 返回 undefine ,? undefine 用在接下去的運算就會報錯咯。
而其他瀏覽器無論 scrollTop 賦值或運算順序如何都不會返回 undefine.? 可以安全使用..
所以說到頭還是IE的問題咯. 杯具…
精神有點恍惚，不知道有沒有表達清楚。
不過最后總結出來這句實驗過OK，大家放心使用；

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

DTD相關說明：

頁面具有 DTD，或者說指定了 DOCTYPE 時，使用 document.documentElement。

頁面不具有 DTD，或者說沒有指定了 DOCTYPE，時，使用 document.body。

在 IE 和 Firefox 中均是如此。

為了兼容，不管有沒有 DTD，可以使用如下代碼：

var scrollTop = window.pageYOffset  //用于FF
            || document.documentElement.scrollTop  
            || document.body.scrollTop  
            || 0;

documentElement 和 body 相關說明：

body是DOM對象里的body子節點，即標簽；

documentElement 是整個節點樹的根節點root，即標簽；

DOM把層次中的每一個對象都稱之為節點，就是一個層次結構，你可以理解為一個樹形結構，就像我們的目錄一樣，一個根目錄，根目錄下有子目錄，子目錄下還有子目錄。

以HTML超文本標記語言為例：整個文檔的一個根就是,在DOM中可以使用document.documentElement來訪問它，它就是整個節點樹的根節點。而body是子節點，要訪問到body標簽，在腳本中應該寫：document.body。

————————————————
版權聲明：本文為CSDN博主「12ers_夢騎士」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u010423...

云服務器 GPU云服務器兼容java的瀏覽器 js兼容瀏覽器兼容多瀏覽器兼容兼容多瀏覽器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110010.html

JS基礎篇--了解JS的clientX、pageX、screenX等方法來獲取鼠標坐標詳解

摘要：相對瀏覽器窗口簡單代碼即可實現，然而這是還不夠，因為絕大多數情況下我們希望獲取鼠標點擊位置相對于瀏覽器窗口的坐標，的，屬性分別表示鼠標點擊位置相對于文檔的左邊距，上邊距。在一些DOM操作中我們經常會跟元素的位置打交道，鼠標交互式一個經常用到的方面，令人失望的是不同的瀏覽器下會有不同的結果甚至是有的瀏覽器下沒結果，這篇文章就上鼠標點擊位置坐標獲取做一些簡單的總結，沒特殊聲明代碼在IE8...

phodal 2019-08-21 10:23 評論0 收藏0
完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評論0 收藏0
完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評論0 收藏0
小程序項目入坑實踐

摘要：公司由于小程序原開發需求變動，產品決定重新開始設計新的小程序，人員緊張，導致我接了這個坑。輸入數字一般項目可能都會碰到金額的輸入限制，這里小程序組件，可利用，來控制輸入只能是數值和小數點。公司由于小程序原開發需求變動，產品決定重新開始設計新的小程序，人員緊張，導致我接了這個坑~。原開發時準備使用 mpvue 來開發，前篇文章介紹了一些關于mpvue的寫法，后來在我將簡易框架搭建后，發...

zhjx922 2019-08-22 18:02 評論0 收藏0
【轉】scrollTop為0的問題

摘要：所以為兼容性考慮，我們可能需要獲取當前的文檔渲染方式。不過加上后，則顯示正常。即獲取高度時使用，經測試，代碼在下都能顯示正常了。主要是瀏覽器的模式，有兩個，。其中前者是怪異模式，后者是標準模式。原文地址http://wo13145219.iteye.com/blog/2001598 一、先遇到document.body.scrollTop值為0的問題　　做頁面的時候可能會用到位置...

pakolagij 2019-08-19 18:15 評論0 收藏0