document.body.scrollTop 值總為0的解決方法 比較常見的標(biāo)準(zhǔn)問題
更新時間:2009年11月30日 19:41:23 作者:
頁面具有 DTD(或者說指定了 DOCTYPE)時,使用 document.documentElement。
做頁面的時候可能會用到位置固定的層,讀取 document.body.scrollTop 來設(shè)置層的位置,像這樣:
window.onscroll = function (){
var oFix = document.getElementById("divfix");
oFix.style.top = document.body.scrollTop + "px";
}
可是怎么沒有達(dá)到預(yù)期效果呢,輸出 document.body.scrollTop 的值一看,一直都是 0。原來是 DTD 的問題,要是頁面直接用 開頭的話就沒有問題了。但是要符合 web 標(biāo)準(zhǔn),DTD 當(dāng)然是不能少的。具有 DTD 時用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。
window.onscroll = function (){
var oFix = document.getElementById("divfix");
oFix.style.top = document.documentElement.scrollTop + "px";
}
編者注:
頁面具有 DTD(或者說指定了 DOCTYPE)時,使用 document.documentElement。
頁面不具有 DTD(或者說沒有指定了 DOCTYPE)時,使用 document.body。
在 IE 和 Firefox 中均是如此。
為了兼容,可以使用如下代碼: var scrollTop = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
window.onscroll = function (){
var oFix = document.getElementById("divfix");
oFix.style.top = document.body.scrollTop + "px";
}
可是怎么沒有達(dá)到預(yù)期效果呢,輸出 document.body.scrollTop 的值一看,一直都是 0。原來是 DTD 的問題,要是頁面直接用 開頭的話就沒有問題了。但是要符合 web 標(biāo)準(zhǔn),DTD 當(dāng)然是不能少的。具有 DTD 時用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。
window.onscroll = function (){
var oFix = document.getElementById("divfix");
oFix.style.top = document.documentElement.scrollTop + "px";
}
編者注:
頁面具有 DTD(或者說指定了 DOCTYPE)時,使用 document.documentElement。
頁面不具有 DTD(或者說沒有指定了 DOCTYPE)時,使用 document.body。
在 IE 和 Firefox 中均是如此。
為了兼容,可以使用如下代碼: var scrollTop = window.pageYOffset
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
相關(guān)文章
javascript點擊按鈕實現(xiàn)隱藏顯示切換效果
這篇文章主要介紹了javascript點擊按鈕實現(xiàn)隱藏顯示切換效果,以一個完整的實例為大家分析了js點擊按鈕實現(xiàn)隱藏顯示切換的功能,感興趣的小伙伴們可以參考一下2016-02-02JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)
這篇文章主要介紹了JavaScript實現(xiàn)列出數(shù)組中最長的連續(xù)數(shù)的方法及使用,需要的朋友可以參考下2014-12-12JS數(shù)組操作(數(shù)組增加、刪除、翻轉(zhuǎn)、轉(zhuǎn)字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)
這篇文章主要介紹了JS數(shù)組操作(數(shù)組增加、刪除、翻轉(zhuǎn)、轉(zhuǎn)字符串、取索引、截取(切片)slice、剪接splice、數(shù)組合并)的相關(guān)資料,需要的朋友可以參考下2016-05-05基于JavaScript實現(xiàn) 網(wǎng)頁切出 網(wǎng)站title變化代碼
這篇文章主要介紹了基于JavaScript實現(xiàn) 網(wǎng)頁切出 網(wǎng)站title變化代碼的相關(guān)資料,需要的朋友可以參考下2016-04-04詳解javascript new的運(yùn)行機(jī)制
這篇文章主要介紹了javascript new的運(yùn)行機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-01-01JavaScript中使用sencha gridpanel 編輯單元格、改變單元格顏色
ExtJS中的表格功能非常強(qiáng)大,包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實用功能,通過本篇文章給大家介紹JavaScript中使用sencha gridpanel 編輯單元、改變單元格顏色,感興趣的朋友一起學(xué)習(xí)2015-11-11