html dom 节点计算,dom位置计算的一些API

Window.scrollY

语法

var y = window.scrollY;

y 是文档从顶部开始滚动过的像素值。

eg

// 保证刚好滚动到第二页

if (window.scrollY) {

window.scroll(0, 0); // 重置滚动位置为文档的左上角

}

window.scrollByPages(1);

备注

pageYOffset 属性是 scrollY 属性的别名：

window.pageYOffset == window.scrollY; // 总是返回 true

为了跨浏览器兼容，请使用 window.pageYOffset 代替 window.scrollY。另外，旧版本IE(<9)两个属性都不支持，必须使用其他的非标准属性。完整的兼容性代码如下：

var supportPageOffset = window.pageXOffset !== undefined;

var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;

var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

Element.scrollTop

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

语法

// 获得滚动的像素数

var intElemScrollTop = someElement.scrollTop;

运行此代码后，intElemScrollTop 是一个整数，即element的内容向上滚动的像素数。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element Element(元素)接口是 Document的一个对象. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为. 例如, HTMLElement 接口是所有HTML元素的基础接口， 而 SVGElement 接口是所有SVG元素的基本接口.")

// 设置滚动的距离

element.scrollTop = intValue;

scrollTop 可以被设置为任何整数值，同时注意：

如果一个元素不能被滚动(例如，它没有溢出，或者这个元素有一个"non-scrollable"属性)， scrollTop将被设置为0。

设置scrollTop的值小于0，scrollTop 被设为0

如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.

image.png

Element.scrollHeight

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

语法

var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;

intElemScrollHeight 存储着与元素scrollHeight像素值对应的一个整数。scrollHeight是一个只读属性。

image.png

问题与解决方案

判定元素是否滚动到底

如果元素滚动到底，下面等式返回true，没有则返回false.

element.scrollHeight - element.scrollTop === element.clientHeight

Element.clientHeight

这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，同时它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

语法

var h = element.clientHeight;

返回整数 h，表示 element 的 clientHeight(单位像素)。

clientHeight 是只读的.

image.png

HTMLElement.offsetWidth

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的(译者注：各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。