Question

似乎在ES5严格模式下不推荐使用body.scrollTop（和body.scrollLeft）。这是什么原因，因为在其他DOMElement s上使用这些属性似乎仍然可以吗？

背景资料：

我有一个函数试图增加（或减少，如指定）scrollTop的所有祖先的element值，直到其中一个实际发生变化。我想知道，为了保持对严格模式的投诉，我应该专门检查body元素，因为父母的链向上移动。

[显然，body是指document.body]

Answer 1

这是Chrome自己不正确的行为，已被弃用，他们警告作者不再依赖它。

scrolling viewport is represented by document.documentElement (<html>) in standards mode or <body> in quirks mode。（Quirks mode模拟Navigator 4和Explorer 5的文档呈现。）

Chrome使用body.scrollTop来表示两种模式下视口的滚动位置，这是错误的。听起来像they want to fix this，所以他们鼓励作者为标准行为编写脚本。

我认为您不需要更改代码。在标准模式下使用body.scrollTop没有任何问题，只要您了解它仅代表body的滚动位置（通常是0，除非您已经给body滚动框）。

您可以通过在控制台中执行document.body.scrollTop来查看警告：

body.scrollTop在严格模式下已弃用。如果处于严格模式，请使用documentElement.scrollTop;如果处于怪癖模式，请使用body.scrollTop。

Answer 2

我注意到我的代码停止使用较新版本的Chrome。我使用window.scrollY

修复了它

在：

var scrollTop = document.body.scrollTop;

现在：

var scrollTop = window.scrollY;

它现在一直有效。您可以找到更多文档here。

另外，我正在使用：

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 个答案: