开始随便写写...

CSSOM

DOM API

节点

事件

Range

遍历

DOM 树形结构中的节点相关 API

触发和监听事件相关 API

操作文字范围相关 API

遍历 DOM 需要的 API

CSSOM View

窗口部分

滚动(滚动API)

布局部分

moveTo,moveBy,resizeTo,resizeBy

视口滚动(可视区域)由window对象上的api控制

元素滚动

1.scrollX 是视口的属性,有别名 pageXOffset

2.scrollY 是视口的属性,有别名 pageYOffset

3.scroll(x, y) 使得页面滚动到特定的位置,有别名 scrollTo,支持传入配置型参数 {top, left};

4.scrollBy(x, y) 使得页面滚动特定的距离,支持传入配置型参数 {top, left}

scrollTop 元素的属性,表示 Y 方向上的当前滚动距离。

scrollLeft 元素的属性,表示 X 方向上的当前滚动距离。

scrollWidth 元素的属性,表示元素内部的滚动内容的宽度,一般来说会大于等于元素宽度

scrollHeight 元素的属性,表示元素内部的滚动内容的高度,一般来说会大于等于元素高度

scroll(x, y) 使得元素滚动到特定的位置,有别名 scrollTo,支持传入配置型参数 {top, left}。

scrollBy(x, y) 使得元素滚动到特定的距离,支持传入配置型参数 {top, left}。

scrollIntoView(arg) 滚动元素所在的父元素,使得元素滚动到可见区域,可以通过 arg 来指定滚到中间、开始或者就近。

滚动事件scroll

window.innerHeight, window.innerWidth 这两个属性表示视口的大小。

window.devicePixelRatio 这个属性非常重要,表示物理像素和 CSS 像素单位的倍率关系,Retina 屏这个值是 2,后来也出现了一些 3 倍的 Android 屏

全局

元素的布局信息

getClientRects();

getClientRects 会返回一个列表,里面包含元素对应的每一个盒所占据的客户端矩形区域

,这里每一个矩形区域可以用 x, y, width, height 来获取它的位置和尺寸。


getBoundingClientRect()。

getBoundingClientRect ,这个 API 的设计更接近我们脑海中的元素盒的概念,它返回元素对应的所有盒的包裹的矩形区域,

需要注意,这个 API 获取的区域会包括当 overflow 为 visible 时的子元素区域。

根据实际的精确度需要,我们可以选择何时使用这两个 API。

这两个 API 获取的矩形区域都是相对于视口的坐标,这意味着,这些区域都是受滚动影响的。

html

CSS

DOM API

DOM API

2019-12-20 14:12:30 0 19
这里是评论

相关推荐