最初我在谷歌上搜索window.scrollTo(0,y)
和element.scrollTop=y
之间的区别。
应用了哪个元素window.scrollTo
?显然,窗口本身不是滚动的内容,而是其内容。直觉上它应该是正文(documentElement),但我还没有找到任何标准。
Perharps this one写有关视口的内容,因此如果窗口视口与某个元素之间存在任何标识,则可以减少该问题,但视口不知道其内容。在引用中,我在 defaultView 或浏览上下文等术语中迷失了...请帮助我了解在滚动期间DOM中发生了什么以及scrollTo窗口方法和scrollTop documentElement属性是互连的。
答案 0 :(得分:3)
嗯,我想最终这一切都归结为术语。
window
对象表示包含DOM文档的窗口。窗口的document
属性指向该窗口中加载的DOM文档。 element
表示文档的对象。
另一个概念是viewport
。视口的功能是约束<html>
元素,它是站点中最上面的包含块。它不是一个真正的html元素;由于各种原因,它只是位于文档根目录和窗口之间。人们通常将其称为浏览器中页面的可见部分。
这些概念非常适合介绍,但在此上下文中最重要的概念是scrolling box
。
如果overflow-x
或overflow-y
属性的元素使用值不是visible
,那么内容溢出其内容区域的每个元素都会有一个关联的滚动框。
因此,每当用户(或脚本)滚动时,它都会影响元素滚动框。 window.scrollTo
影响文档根节点的滚动框,最上面的包含块:html
元素。这不是你看到的东西,因为它只会改变你在视口中看到的内容,而且似乎是与窗口的交互。因此人们称之为“滚动窗口”或“滚动文档”。
有一个例外。兼容模式下的IE使用body
元素作为渲染和测量偏移的基础。这使得使用滚动位置变得不那么直接,这也是许多开发人员依赖库来获取正确值的原因。
答案 1 :(得分:2)
在哪个元素上应用了window.scrollTo?...直观地说它应该是body(documentElement),但我还没有找到任何标准。
我认为您正在寻找的是information on the body element:
body元素将事件处理程序内容属性公开为数字 Window对象的事件处理程序。它也反映了他们 事件处理程序IDL属性。
onblur,onerror,onfocus,onload,onresize和onscroll事件 Window对象的处理程序,在body元素上公开,替换 通常支持的具有相同名称的通用事件处理程序 HTML元素。
至于scrollTop,来自Nicholas C. Zakas的 Web开发人员的专业JavaScript :
scrollTop - 隐藏在顶部的像素数 内容区域。可以设置此属性以更改滚动位置 元素。
因此,scrollTop衡量一个元素(如div
)向下滚动的程度。
该文件有:
Document接口的 defaultView IDL属性必须返回Document的browsing context的WindowProxy对象(如果有),否则返回null。
浏览上下文是 将Document对象呈现给的环境 user ....在任何时候,每个浏览上下文中都有一个Document 指定活动文件。文档的浏览上下文就是这样 浏览上下文,其会话历史记录包含Document(如果有)。 (使用诸如createDocument()之类的API创建的文档没有 浏览上下文。)
浏览上下文中的每个文档都与一个窗口相关联 宾语。浏览上下文的 WindowProxy 对象将所有内容转发给 浏览上下文的活动文档窗口对象。