浏览器滚动在 DOM 中如何工作？

Question

window.scrollTo(0,y)最初我是在谷歌上搜索和之间的区别element.scrollTop=y。

应用在哪个元素上window.scrollTo？显然滚动的不是窗口本身，而是它的内容。直观上它应该是主体（documentElement），但我还没有找到任何关于它的标准。

也许这篇文章是关于视口的，所以如果窗口视口和某些元素之间存在任何标识，但视口不知道它们的内容，那么问题就可以减少。在参考资料中，我迷失在defaultView或浏览上下文等术语中...请帮助我理解滚动期间 DOM 中发生的情况以及scrollTo 窗口方法和scrollTop documentElement 属性如何互连。

Answer 1

好吧，我想最终这一切都归结为术语。

\n\n

该window对象代表一个包含 DOM 文档的窗口。窗口的属性document指向该窗口中加载的 DOM 文档。Anelement表示文档的对象。

\n\n

另一个概念是viewport. 视口的功能是约束<html>元素，该元素是站点最上面的包含块。它不是一个实际的 html 元素；由于各种原因，它只是位于文档根目录和窗口之间。人们通常将其称为浏览器中页面的可见部分。

\n\n

这些概念很容易介绍，但在这种情况下最重要的一个是scrolling box.

\n\n

如果 element\xe2\x80\x99s 或overflow-x属性的使用值overflow-y不是，则每个内容溢出其内容区域的元素都有一个关联的滚动框visible。

\n\n

因此，每当用户（或脚本）滚动时，它都会影响元素滚动框。window.scrollTo影响文档根节点的滚动框，最上面的包含块：元素html。它不是您看到的东西，因为它只是改变您在视口中看到的内容，并且似乎是与窗口的交互。因此人们称之为“滚动窗口”或“滚动文档”。

\n\n

有一个例外。兼容模式下的 IE 使用该body元素作为渲染和测量偏移的基础。这使得使用滚动位置变得不那么直接，也是许多开发人员依赖库来获取正确值的原因。

\n