document.body.scrollTop 兼容問題

1.?各瀏覽器下 scrollTop的差異

IE6/7/8:

對于沒有doctype聲明的頁面里可以使用document.body.scrollTop來獲取 scrollTop高度憔晒;

對于有doctype聲明的頁面則可以使用document.documentElement.scrollTop;


Safari:

safari 比較特別郑藏,有自己獲取scrollTop的函數 :window.pageYOffset 鲤孵;

Firefox用僧,Chrome IE9+:

火狐谷歌等等相對標準些的瀏覽器就省心多了,直接用document.documentElement.scrollTop 赞咙;

2.?獲取scrollTop值

完美的獲取scrollTop 賦值短語 :

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

通過這句賦值就能在任何情況下獲得scrollTop 值责循。

仔細觀察這句賦值,你發(fā)現(xiàn)啥了沒攀操?院仿?

沒錯, 就是window.pageYOffset? (Safari)?? 被放置在 || 的中間位置速和。

因為當數字0undefine進行或運算時歹垫,系統(tǒng)默認返回最后一個值。

alert(undefined || 0);? -------0

alert( 0 || undefined);? -------undefined

即或運算中 0 == undefine ;

當頁面滾動條剛好在最頂端颠放,即scrollTop值為 0 時排惨。

? IE 下 window.pageYOffset? (Safari) 返回為 undefine ,此時將window.pageYOffset? (Safari) 放在或運算最后面時碰凶, scrollTop 返回 undefine ,? undefine 用在接下去的運算就會報錯暮芭。

而其他瀏覽器 無論 scrollTop 賦值或運算順序如何都不會返回 undefine.? 可以安全使用..

不過最后總結出來這句實驗過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? //用于safari

|| document.documentElement.scrollTop

|| document.body.scrollTop

|| 0;

documentElement 和 body 相關說明:

body是DOM對象里的body子節(jié)點,即 標簽河胎;

documentElement 是整個節(jié)點樹的根節(jié)點root闯袒,即 標簽;

DOM把層次中的每一個對象都稱之為節(jié)點游岳,就是一個層次結構政敢,你可以理解為一個樹形結構,就像我們的目錄一樣胚迫,一個根目錄喷户,根目錄下有子目錄,子目錄下還有子目錄访锻。

以HTML超文本標記語言為例:整個文檔的一個根就是,在DOM中可以使用document.documentElement來訪問它褪尝,它就是整個節(jié)點樹的根節(jié)點闹获。而body是子節(jié)點,要訪問到body標簽河哑,在腳本中應該寫:document.body避诽。


抄一抄,總會有提高璃谨!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末沙庐,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子佳吞,更是在濱河造成了極大的恐慌拱雏,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,997評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件底扳,死亡現(xiàn)場離奇詭異古涧,居然都是意外死亡,警方通過查閱死者的電腦和手機花盐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來菇爪,“玉大人算芯,你說我怎么就攤上這事〉手妫” “怎么了熙揍?”我有些...
    開封第一講書人閱讀 163,359評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長氏涩。 經常有香客問我届囚,道長,這世上最難降的妖魔是什么是尖? 我笑而不...
    開封第一講書人閱讀 58,309評論 1 292
  • 正文 為了忘掉前任意系,我火速辦了婚禮,結果婚禮上饺汹,老公的妹妹穿的比我還像新娘蛔添。我一直安慰自己,他們只是感情好兜辞,可當我...
    茶點故事閱讀 67,346評論 6 390
  • 文/花漫 我一把揭開白布迎瞧。 她就那樣靜靜地躺著,像睡著了一般逸吵。 火紅的嫁衣襯著肌膚如雪凶硅。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,258評論 1 300
  • 那天扫皱,我揣著相機與錄音足绅,去河邊找鬼捷绑。 笑死,一個胖子當著我的面吹牛编检,可吹牛的內容都是我干的胎食。 我是一名探鬼主播,決...
    沈念sama閱讀 40,122評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼允懂,長吁一口氣:“原來是場噩夢啊……” “哼厕怜!你這毒婦竟也來了?” 一聲冷哼從身側響起蕾总,我...
    開封第一講書人閱讀 38,970評論 0 275
  • 序言:老撾萬榮一對情侶失蹤粥航,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后生百,有當地人在樹林里發(fā)現(xiàn)了一具尸體递雀,經...
    沈念sama閱讀 45,403評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,596評論 3 334
  • 正文 我和宋清朗相戀三年蚀浆,在試婚紗的時候發(fā)現(xiàn)自己被綠了缀程。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,769評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡市俊,死狀恐怖杨凑,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情摆昧,我是刑警寧澤撩满,帶...
    沈念sama閱讀 35,464評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站绅你,受9級特大地震影響伺帘,放射性物質發(fā)生泄漏。R本人自食惡果不足惜忌锯,卻給世界環(huán)境...
    茶點故事閱讀 41,075評論 3 327
  • 文/蒙蒙 一伪嫁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧偶垮,春花似錦礼殊、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至啄枕,卻和暖如春婚陪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背频祝。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評論 1 269
  • 我被黑心中介騙來泰國打工泌参, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留脆淹,地道東北人。 一個月前我還...
    沈念sama閱讀 47,831評論 2 370
  • 正文 我出身青樓沽一,卻偏偏與公主長得像盖溺,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子铣缠,可洞房花燭夜當晚...
    茶點故事閱讀 44,678評論 2 354

推薦閱讀更多精彩內容

  • 1. 各瀏覽器下 scrollTop的差異 IE6/7/8: 對于沒有doctype聲明的頁面里可以使用 doc...
    半塊蘋果閱讀 1,866評論 0 0
  • 一蝗蛙、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構)蝇庭,知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,770評論 0 8
  • 轉載請聲明出處 博客原文 隨手翻閱以前的學習筆記捡硅,順便整理一下放在這里哮内,方便自己復習,也希望你有也有幫助吧 第一課...
    程序員poetry閱讀 12,655評論 13 94
  • 本文是針對剛學編程的小白,都是一些基礎知識,如果想了解更多深層一點的東西,歡迎移步本人博客!! 博客地址 點擊跳轉...
    西巴擼閱讀 572評論 0 2
  • 給茉茉穿衣服的時候壮韭,我交代她爸爸北发,上午看好寶寶,他爸爸生氣說說要去加班喷屋,我說加班帶著她鲫竞,茉茉仰著臉問我,媽媽逼蒙、你去...
    飄心獄閱讀 273評論 0 0