Why is body.scrollTop deprecated?

二次信任 提交于 2019-11-27 14:17:02

It's Chrome's own incorrect behavior that is deprecated, and they're warning authors to stop relying on it.

The scrolling viewport is represented by document.documentElement (<html>) in standards mode or <body> in quirks mode. (Quirks mode emulates the document rendering of Navigator 4 and Explorer 5.)

Chrome uses body.scrollTop to represent the viewport's scroll position in both modes, which is wrong. It sounds like they want to fix this so they're encouraging authors to script for the standard behavior.

I don't think you need to change your code. There's nothing wrong with using body.scrollTop in standards mode so long as you understand it represents the scroll position of body only (typically 0, unless you've given body a scroll box).

You can see the warning by executing document.body.scrollTop in the console:

body.scrollTop is deprecated in strict mode. Please use documentElement.scrollTop if in strict mode and body.scrollTop only if in quirks mode.

I noticed my code stop working on newer versions of Chrome. I fixed it by using window.scrollY

Before:

var scrollTop = document.body.scrollTop;

Now:

var scrollTop = window.scrollY;

It works all the time now. You can find more documentation here.

Also, I was using:

document.body.scrollTop = 0;

now I replaced it with:

window.scrollTo(0, 0);

scrollTop refers to how much the element is scrolled. This means body shouldn't have a scrollTop because it is never scrolled, body has the topmost scrollbar so it's contents can be scrolled but not body itself.
The last picture on this page explains a lot:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!