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

最初，我在谷歌上搜索

window.scrollTo（0，y）

和

element.scrollTop=y

之间的差异

在哪个元素上应用了

window.scrollTo

？显然，滚动的不是窗口本身，而是它的内容。直觉上应该是body（documentElement），但我还没有找到任何关于它的标准

---

Perharps撰写了有关视口的文章，因此，如果“窗口”视口和某个元素之间存在任何标识，但视口不知道其内容，则问题可以减少。在参考资料中，我在defaultView或浏览上下文之类的术语中迷失了方向。。。请帮助我理解在滚动过程中DOM中发生了什么，以及scrollTo窗口方法和scrollTop documentElement属性是如何相互关联的。

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

窗口

对象表示包含DOM文档的窗口。窗口的

document

属性指向该窗口中加载的DOM文档。

元素

表示文档的对象

另一个概念是

视口

。视口的功能是约束

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

这些概念非常适合介绍，但在本文中最重要的是

滚动框

如果元素的

overflow-x

或

overflow-y

属性的使用值不可见，则内容溢出其内容区域的每个元素都有一个关联的滚动框

因此，每当用户（或脚本）滚动时，它都会影响元素滚动框

window.scrollTo

影响文档根节点的滚动框，文档根节点是最上面的包含块：

html

元素。它不是你看到的东西，因为它只是改变了你在视口中看到的东西，似乎是与窗口的交互。因此人们称之为“滚动窗口”或“滚动文档”

有一个例外。IE在兼容模式下使用

主体

元素作为渲染和测量偏移的基础。这使得使用滚动位置变得不那么直截了当，这也是许多开发人员依赖库来获取正确值的原因。

哪个元素是window.scrollTo应用的？…直觉上应该是body（documentElement），但我还没有找到任何关于这方面的标准

我想你要找的是：

body元素作为事件处理程序内容属性公开一个数字 窗口对象的事件处理程序的。这也反映了他们的想法 事件处理程序IDL属性

onblur、onerror、onfocus、onload、onresize和onscroll事件 显示在body元素上的窗口对象的处理程序替换 具有通常由支持的相同名称的通用事件处理程序 HTML元素

至于scrollTop，来自Nicholas C.Zakas为Web开发人员编写的专业JavaScript：

scrollTop—隐藏在屏幕顶部的像素数 内容区。可以设置此属性以更改滚动位置 元素的属性

所以scrollTop是一个元素（如

div

）向下滚动的度量

---

来自

政府有：

• 属性

该文件包括：

• 一个名为
• HTMLElement主体
• HTMLHeadElement头
• 图像、脚本、链接等的HTMLCollections

文档接口的defaultViewIDL属性必须返回文档的WindowProxy对象（如果有），否则返回null

浏览上下文是 文档对象呈现给用户的环境 用户…在任何时候，每个浏览上下文中的一个文档都是 指定活动文档。文档的浏览上下文是 浏览会话历史记录中包含文档的上下文（如果有）。 （使用诸如createDocument（）之类的API创建的文档没有 浏览上下文。）

浏览上下文中的每个文档都与一个窗口相关联 对象浏览上下文的WindowProxy对象将所有内容转发给 浏览上下文的活动文档的窗口对象

---

看起来像是一个伟大的洞察力，只有一件事-它不是你看到的东西，因为它只是改变了你看到的。。。“它”是什么意思？滚动窗口。澄清一下：如果将

overflow:scroll

应用于另一个元素，则不会看到

html

元素的滚动框。可以说窗口作为一个整体是它的滚动框。使用窗口的滚动条只需更改您看到的内容，并直接影响

html

元素的

scrollTop

值。