成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

各大瀏覽器下scrollTop的兼容

jerryloveemily / 1144人閱讀

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

$(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的函數(shù) ： window.pageYOffset ；
Firefox:
火狐等等相對標(biāo)準(zhǔn)些的瀏覽器就省心多了，直接用 document.documentElement.scrollTop ；
2、獲取scrollTop值
完美的獲取scrollTop 賦值短語 ：

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

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

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

DTD相關(guān)說明：

頁面具有 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 相關(guān)說明：

body是DOM對象里的body子節(jié)點(diǎn)，即 標(biāo)簽；

documentElement 是整個節(jié)點(diǎn)樹的根節(jié)點(diǎn)root，即 標(biāo)簽；

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

以HTML超文本標(biāo)記語言為例：整個文檔的一個根就是,在DOM中可以使用document.documentElement來訪問它，它就是整個節(jié)點(diǎn)樹的根節(jié)點(diǎn)。而body是子節(jié)點(diǎn)，要訪問到body標(biāo)簽，在腳本中應(yīng)該寫：document.body。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110010.html

相關(guān)文章

  • JS基礎(chǔ)篇--了解JS的clientX、pageX、screenX等方法來獲取鼠標(biāo)坐標(biāo)詳解

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

    phodal 評論0 收藏0

  • 完美實(shí)現(xiàn)一個“回到頂部”

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

    layman 評論0 收藏0

  • 完美實(shí)現(xiàn)一個“回到頂部”

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

    littlelightss 評論0 收藏0

  • 小程序項(xiàng)目入坑實(shí)踐

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

    zhjx922 評論0 收藏0

  • 【轉(zhuǎn)】scrollTop為0的問題

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

    pakolagij 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<