offset/client/scroll你都记清了吗?

`offset`家族

都是整数值, 如果是小数会四舍五入

Element.offsetHeight返回一个整数，包括**元素本身的高度、padding 和 border **，以及水平滚动条的高度 (如果存在滚动条）。
Element.offsetWidth表示元素本身的宽度, 其他都与Element.offsetHeight一致。

这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。

如果元素的 CSS 设为不可见（比如display: none;），则返回0。

Element.offsetParent属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。

该属性主要用于确定子元素位置偏移的计算基准，Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。

如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则offsetParent属性返回null。

Element.offsetLeft返回当前元素左上角相对于最近的开启了定位的节点的水平位移
Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。

`client`家族

都是整数值, 如果是小数会四舍五入

Element.clientHeight表示元素节点本身的高度和 **padding**，只对块级元素生效，对于行内元素返回0。

这个高度不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。

Element.clientWidth表示元素节点本身的宽度和 padding, 其余和Element.clientHeight一致
Element.clientLeft表示元素节点左边框的宽度，不包括左侧的padding和margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0。
Element.clientTop表示网页元素上边框的宽度，其他特点都与clientLeft相同。

判断滚动条是否滚动到底

垂直滚动条 : scrollHeight -scrollTop = clientHeight
水平滚动条 : scrollWidth - scrollLeft = clientWidth

其它

document.documentElement的clientHeight属性，返回当前视口的高度（即浏览器窗口的高度），等同于window.innerHeight属性减去水平滚动条的高度（如果有的话）。
document.body的高度则是网页的实际高度。一般来说，document.body.clientHeight(网页总高度)大于document.documentElement.clientHeight(视口高度)。

`scroll`家族

都是整数值, 如果是小数会四舍五入

Element.scrollHeight表示当前元素的总高度，包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。
Element.scrollWidth属性表示当前元素的总宽度，其他地方都与scrollHeight属性类似。这两个属性只读。

整张网页的总高度可以从document.documentElement或document.body上读取。

1
2
3

// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight

Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的距离。
Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的距离。对于那些没有滚动条的网页元素，这两个属性总是等于0。

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取。

1 2	`document.documentElement.scrollLeft document.documentElement.scrollTop`

这两个属性都可读写，设置该属性的值（不需要单位），会导致浏览器将当前元素自动滚动到相应的位置。