首頁 web前端 js教程 document.body.scrollTop 值总为0的解决方法 比较常见的标准问题_javascript技巧

document.body.scrollTop 值总为0的解决方法 比较常见的标准问题_javascript技巧

May 16, 2016 pm 06:40 PM
標準

做页面的时候可能会用到位置固定的层,读取 document.body.scrollTop 来设置层的位置,像这样:­

window.onscroll = function (){
var oFix = document.getElementById("divfix");
oFix.style.top = document.body.scrollTop + "px";
}

可是怎么没有达到预期效果呢,输出 document.body.scrollTop 的值一看,一直都是 0。原来是 DTD 的问题,要是页面直接用 开头的话就没有问题了。但是要符合 web 标准,DTD 当然是不能少的。具有 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;

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1246
24
PHP函數庫設計的原則與標準 PHP函數庫設計的原則與標準 Jun 16, 2023 am 11:37 AM

隨著PHP在Web開發中的重要性不斷提高,PHP函數庫設計也成為了開發中的關鍵問題之一。好的函數庫不僅可以提高開發效率,還能確保程式碼的品質和可維護性。因此,設計函數庫需要遵循一些基本原則和標準。一、可重複使用性好的函數庫應該是可重複使用的,可以在不同的項目中使用。因此,函數應該是抽象的、通用的,不能和特定的項目或場景捆綁在一起。二、易用性函數庫應該易於使用,傳遞參數

哪些標準可以用來將 PHP 函數分類? 哪些標準可以用來將 PHP 函數分類? Apr 19, 2024 am 09:30 AM

PHP函數可依多種標準分類:目的(字串處理、陣列處理等)、作用域(內建函數、使用者自訂函數)和傳回值(有傳回值、無回傳值)。實戰案例:ex​​plode()函數可將字串以指定分隔符號分割成陣列。

解密黏性定位的關鍵要素:如何評估黏性定位的準則? 解密黏性定位的關鍵要素:如何評估黏性定位的準則? Jan 28, 2024 am 10:39 AM

如何判斷黏性定位的標準?揭秘黏性定位的關鍵要素導語:黏性定位作為一種市場定位策略,對企業的品牌推廣和市場競爭起到至關重要的作用。然而,如何判斷黏性定位的標準卻是個令人頭痛的問題。本文將揭秘黏性定位的關鍵要素,幫助企業更能判斷黏性定位的標準。一、認清黏性定位的意義黏性定位是指企業透過獨特的品牌特性和核心競爭優勢,使消費者產生強烈的認同與忠誠度,從而形成一種

解析黏性定位的基準與核心需求:一個深入探討 解析黏性定位的基準與核心需求:一個深入探討 Jan 28, 2024 am 08:07 AM

黏性定位的標準是指在市場競爭中,一個企業或品牌能夠長期佔據消費者心智中的固定位置,並且能夠穩定地維持市場份額和品牌忠誠度的能力。黏性定位是行銷的重要概念,它強調在激烈競爭的市場環境中,企業需要建立自己獨特的定位,並與消費者建立緊密的關係,以保持競爭優勢。黏性定位的核心要求包括以下幾個面向:獨特性:一個企業或品牌在市場上的定位必須是獨特且與競爭對手有所

深入探討PHP的標準標記 深入探討PHP的標準標記 Mar 29, 2024 pm 03:39 PM

在Web開發中,PHP是一種廣泛應用的程式語言,它的標準標記是PHP程式碼中的特殊標記符號,用來識別PHP程式碼的開始和結束。深入了解PHP的標準標記是非常重要的,因為它們直接影響PHP程式碼的解析和執行過程。本文將深入探討PHP的標準標記,並提供具體的程式碼範例,幫助讀者更能理解並運用PHP程式設計。一、PHP的標準標記在PHP中,最常用的標準標記是「

有關通用人工智慧需要知道的事項 有關通用人工智慧需要知道的事項 May 09, 2023 pm 02:25 PM

最近,關於生成式人工智慧工具的討論越來越多,特別是在多個大型語言模型和圖像生成器(如DALL-E或Midjourney)發布之後。這些發明再次將通用人工智慧(GPAI)置於人們的關注的目光下,並再次提出了諸如GPAI是否應該受到監管等假設性問題。在人們進一步探索可能性之前,先了解GPAI的概念,它的意義,它是什麼時候引入的等等。什麼是通用人工智慧?兩年前,也就是2021年4月,歐盟委員會推出了通用人工智慧。最初的人工智慧法案提案免除了通用人工智慧創建者遵守一些法律文件和其他責任標準的責任。原因

Go語言是否符合上層語言的標準? Go語言是否符合上層語言的標準? Mar 13, 2024 am 11:39 AM

標題:Go語言是否符合上層語言的標準?近年來,Go語言作為一種新興的程式語言受到了廣泛關注和應用。作為一種靜態類型、編譯型的語言,Go語言在並發程式設計、記憶體管理和程式碼可讀性方面具有獨特的優勢,但在一些程式設計師眼中,它並不完全符合上層語言所應該具備的標準。本文將從幾個面向探討Go語言是否符合上層語言的標準,並結合具體的程式碼範例展開討論。一、程式碼簡潔性上層語言通常被

黏性定位的標準及黏性定位的要素和要求分析 黏性定位的標準及黏性定位的要素和要求分析 Feb 02, 2024 pm 12:36 PM

黏性定位是一種常見的網頁佈局技術,透過使元素在滾動時保持固定位置,提供更好的使用者體驗。本文將解析黏性定位的標準、要素和要求,並提供具體程式碼範例。一、黏性定位的標準相容性:黏性定位應在主流瀏覽器上正常運作,如Chrome、Firefox、Safari等。滾動效果:元素在滾動時應平滑過渡,避免閃爍或抖動的情況。響應式設計:黏性定位應適應不同裝置和螢幕大小,確

See all articles