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

时间:2015-12-12 15:59:09

标签: javascript dom scroll

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

应用了哪个元素window.scrollTo?显然,窗口本身不是滚动的内容,而是其内容。直觉上它应该是正文(documentElement),但我还没有找到任何标准。

Perharps this one写有关视口的内容,因此如果窗口视口与某个元素之间存在任何标识,则可以减少该问题,但视口不知道其内容。在引用中,我在 defaultView 浏览上下文等术语中迷失了...请帮助我了解在滚动期间DOM中发生了什么以及scrollTo窗口方法和scrollTop documentElement属性是互连的。

2 个答案:

答案 0 :(得分:3)

嗯,我想最终这一切都归结为术语。

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

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

这些概念非常适合介绍,但在此上下文中最重要的概念是scrolling box

如果overflow-xoverflow-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)向下滚动的程度。

W3C's HTML5 Specification

中的一些定义

window object有:

该文件有:

  • 名为WindowProxy
  • defaultView属性
  • HTMLElement正文
  • HTMLHeadElement头
  • HTMLCollections图像,脚本,链接等
  

Document接口的 defaultView IDL属性必须返回Document的browsing context的WindowProxy对象(如果有),否则返回null。

     

浏览上下文是   将Document对象呈现给的环境   user ....在任何时候,每个浏览上下文中都有一个Document   指定活动文件。文档的浏览上下文就是这样   浏览上下文,其会话历史记录包含Document(如果有)。   (使用诸如createDocument()之类的API创建的文档没有   浏览上下文。)

     

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

相关问题