JS中完美兼容各大瀏覽器的scrolltop方法
1、各瀏覽器下 scrollTop的差異
IE6/7/8/9/10：
對(duì)于沒有doctype聲明的頁面里可以使用 document.body.scrollTop 來獲取 scrollTop高度 ；
對(duì)于有doctype聲明的頁面則可以使用 document.documentElement.scrollTop ；
Safari:
safari 比較特別，有自己獲取scrollTop的函數(shù) ： window.pageYOffset ；
Firefox:
火狐等等相對(duì)標(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)啥了沒？？
沒錯(cuò)， 就是 window.pageYOffset (Safari) 被放置在 || 的中間位置。
因?yàn)楫?dāng) 數(shù)字0 與 undefine 進(jìn)行 或運(yùn)算時(shí)，系統(tǒng)默認(rèn)返回最后一個(gè)值。即或運(yùn)算中 0 == undefine ;
當(dāng)頁面滾動(dòng)條剛好在最頂端，即scrollTop值為 0 時(shí)，IE 下 window.pageYOffset (Safari) 返回為 undefine ，此時(shí)將 window.pageYOffset (Safari) 放在或運(yùn)算最后面時(shí)， scrollTop 返回 undefine , undefine 用在接下去的運(yùn)算就會(huì)報(bào)錯(cuò)咯。
而其他瀏覽器 無論 scrollTop 賦值或運(yùn)算順序如何都不會(huì)返回 undefine. 可以安全使用..
所以說到頭還是IE的問題咯. 杯具…
精神有點(diǎn)恍惚，不知道有沒有表達(dá)清楚。
不過最后總結(jié)出來這句實(shí)驗(yàn)過OK，大家放心使用。
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
這是完美的獲取scrollTop賦值語句。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了JavaScript 防抖和節(jié)流,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
本文為大家分享的是一款效果非?？岬奈募蟼鞅韱斡蛎阑匦?。有7種不同的美化文件上傳域的效果，很時(shí)尚，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript新手必看之var在for循環(huán)中的坑
var這個(gè)關(guān)鍵字在JS當(dāng)中是相當(dāng)常用的，但同時(shí)配合到for循環(huán)的話會(huì)出現(xiàn)不符合預(yù)期的運(yùn)行結(jié)果，所以本文就來為大家講講如何避免這種情況的出現(xiàn)2023-05-05
js頁面跳轉(zhuǎn)的問題(跳轉(zhuǎn)到父頁面、最外層頁面、本頁面)
js頁面跳轉(zhuǎn)：本頁面跳轉(zhuǎn),上一層頁面跳轉(zhuǎn)，最外層的頁面跳轉(zhuǎn)，下面為大家大家分享下不同頁面之家的跳轉(zhuǎn)問題，感興趣的朋友可以學(xué)習(xí)下2013-08-08
JS快速實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了JS快速實(shí)現(xiàn)簡(jiǎn)單計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
JavaScript實(shí)現(xiàn)網(wǎng)頁留言板功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了小程序?qū)崿F(xiàn)長按保存圖片的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
本文主要介紹了Typescript實(shí)現(xiàn)棧的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
在web開發(fā)中我們經(jīng)常各種各樣的需求。今天小編給大家介紹JS區(qū)分瀏覽器頁面是刷新還是關(guān)閉標(biāo)簽頁，非常實(shí)用，感興趣的童鞋參考下吧2016-04-04
這篇文章主要介紹了leaflet基本使用示例教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12