为什么body.scrollTop被弃用了？

Question

为什么body.scrollTop被弃用了？

javascriptscrolltopstrict-mode

49

看起来在ES5严格模式下，body.scrollTop（以及body.scrollLeft）已经被弃用。鉴于在其他DOMElement上仍然可以使用这些属性，这是什么原因？

背景信息：

我有一个函数，试图增加（或减少，根据指定）element的所有祖先元素的scrollTop值，直到其中一个实际改变。我想知道，为了保持与严格模式的兼容性，是否应该在向上移动父链时特别检查body元素。

【显然，body指的是document.body】

- Himanshu P

4

你觉得严格模式对此有什么影响吗？ECMAScript规范与浏览器在浏览器环境中提供的宿主对象无关（JavaScript可能使用的几种环境之一），严格模式不能改变它们。 - T.J. Crowder

哦，我不知道那个。我正在开发一个Chrome扩展，并且在控制台上开始收到一堆关于body.scrollTop过时严格模式的警告（我指定了"use strict"）。目前，这只在Chrome的Canary版本上发生，但我认为稳定版也很快就会出现同样的情况。 - Himanshu P

@T.J.Crowder 有没有办法可以避免我在上一个评论中提到的console警告信息？此外，如果ECMAScript规范与此无关，为什么浏览器首先会发出警告呢？ - Himanshu P

@ Himanshu：不使用严格模式？至于为什么Chrome提到严格模式，他们肯定有自己的原因来禁止在Chrome扩展中使用它。 - T.J. Crowder

1

他们指的是标准模式（文档呈现模式），而不是ES5严格模式。 - sam

我不知道为什么它被弃用，即使对我来说没有太多意义。但是请看一下这个提交，可能会澄清如何解决它。此外，您可能已经注意到这些在移动设备上（至少在iOS上）无法工作，这太糟糕了。 - zanona

4个回答

28

我注意到我的代码在较新版本的Chrome上停止工作。我通过使用window.scrollY来修复它。

之前：

var scrollTop = document.body.scrollTop;

现在：

var scrollTop = window.scrollY;

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

另外，我曾经使用：

document.body.scrollTop = 0;

现在我已经用新的东西替换了它：

window.scrollTo(0, 0);

- Adrian

如果您担心IE浏览器兼容性问题，请使用window.pageYOffset。https://caniuse.com/#search=scrollY - cheshireoctopus

3

以下代码适用于所有浏览器，可以在点击事件触发时将弹出窗口设置到正确的位置。

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

- Lakshmi Narayana

-4

scrollTop 指的是元素滚动的距离。这意味着 body 不应该有 scrollTop，因为它从未被滚动过，body 有最顶部的滚动条，所以它的内容可以被滚动但 body 本身不会被滚动。
这个页面上的最后一张图片解释了很多：
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

- Marvin Brouwer

1

如果您在控制台上检查，document.body.scrollTop 的值等于页面从顶部滚动了多少像素。 - Himanshu P

1

抱歉，我一直以为body不应该有scrollTop。显然我错了。 - Marvin Brouwer

@MarvinBrouwer，你的想法其实是正确的...在Firefox中，当视口滚动时，body.scrollTop === 0。 - sam

4

我不认为这样的事实证明我是正确的。如果你输入 document.getElementsByTagName("html")[0].scrollTop，你会得到滚动偏移量。显然，Firefox 希望滚动 HTML 文档而不是 body 元素。然而，这并不能说明 body 是否能够拥有 scrollTop。 - Marvin Brouwer

2

只有 Chrome 不符合标准，因此在编程方面的相关内容中扣除 5 分。 - Noishe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sam · Accepted Answer

Chrome自己的不正确行为被弃用了，并且他们正在警告作者停止依赖它。

滚动视口由标准模式下的document.documentElement（<html>）或怪异模式下的<body>表示。（怪异模式模拟Navigator 4和Explorer 5的文档呈现。）

Chrome在两种模式下都使用body.scrollTop来表示视口的滚动位置，这是错误的。听起来他们想要修复这个问题，所以他们鼓励作者编写符合标准的脚本。

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

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

在严格模式中，body.scrollTop已被弃用，请在严格模式下使用documentElement.scrollTop，在怪异模式下使用body.scrollTop。