為什么不推薦使用 body.scrollTop？

Question

似乎body.scrollTop （和body.scrollLeft ）在 ES5 嚴格模式中已被棄用。 考慮到在其他DOMElement上使用這些屬性似乎仍然可以，這是什么原因？

背景資料：

我有一個函數試圖增加（或減少，如指定） element的所有祖先的scrollTop值，直到其中一個實際發生變化。 我想知道，為了保持對嚴格模式的抱怨，我應該在父鏈向上移動時專門檢查body元素。

[顯然， body指的是document.body ]

Answer 1

不推薦使用的是 Chrome 自己的錯誤行為，他們警告作者停止依賴它。

滾動視口由標准模式下的document.documentElement ( <html> ) 或 quirks 模式下的<body> 。 （ Quirks 模式模擬 Navigator 4 和 Explorer 5 的文檔呈現。）

Chrome 在兩種模式下都使用body.scrollTop來表示視口的滾動位置，這是錯誤的。 聽起來他們想要解決這個問題，所以他們鼓勵作者為標准行為編寫腳本。

我認為您不需要更改代碼。 在標准模式下使用body.scrollTop並沒有錯，只要您理解它僅代表body的滾動位置（通常為0 ，除非您給body一個滾動框）。

您可以通過在控制台中執行document.body.scrollTop來查看警告：

body.scrollTop在嚴格模式下已棄用。 請在嚴格模式下使用documentElement.scrollTop ，僅在 quirks 模式下使用body.scrollTop 。

Answer 2

我注意到我的代碼在較新版本的 Chrome 上停止工作。 我使用window.scrollY修復了它

前：

var scrollTop = document.body.scrollTop;

現在：

var scrollTop = window.scrollY;

它現在一直有效。 您可以在此處找到更多文檔。

另外，我正在使用：

document.body.scrollTop = 0;

現在我將其替換為：

window.scrollTo(0, 0);

Answer 3

以下代碼適用於我在單擊事件觸發時將彈出窗口設置在正確位置，適用於所有瀏覽器。

var scrollTop = window.scrollY; //For all browsers.
var scrollTop = document.body.scrollTop; //This works for only IE Edge specific versions

Answer 4

scrollTop 指的是元素滾動了多少。 這意味着 body 不應該有 scrollTop 因為它從不滾動，body 有最頂部的滾動條，所以它的內容可以滾動但不是 body 本身。
此頁面上的最后一張圖片解釋了很多：
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

為什么不推薦使用 body.scrollTop？

問題描述

4 個解決方案

解決方案1
46 已采納 2013-11-19 00:00:21

解決方案2
20 2018-04-06 19:11:25

解決方案3
2 2020-10-06 18:45:14

解決方案4
-5 2013-10-28 12:53:58

為什么不推薦使用 body.scrollTop？

問題描述

4 個解決方案

解決方案1 46 已采納 2013-11-19 00:00:21

解決方案2 20 2018-04-06 19:11:25

解決方案3 2 2020-10-06 18:45:14

解決方案4 -5 2013-10-28 12:53:58

解決方案1
46 已采納 2013-11-19 00:00:21

解決方案2
20 2018-04-06 19:11:25

解決方案3
2 2020-10-06 18:45:14

解決方案4
-5 2013-10-28 12:53:58