关于元素到窗口距离的一些整理

在做懒加载和一些高度改变的动画时，我们需要知道元素在窗口中的位置，下面是这次整理的一些元素偏移量介绍

1. 浏览器的一些属性

screen.height/width，屏幕的高/宽，与显示器的分辨率有关
screen.availHeight/availWidth，屏幕有效区域的高/宽，相比较height/width少去了菜单栏的所占位
scrollY/pageYOffset，浏览器垂直滚动条滚动的距离，随着滚动条位置的不同而改变
dom.scrollTo(x,y)，修改浏览器的滚动位置

screen值获取到的是整个屏幕的宽高,并不会随着浏览器窗口缩放而改变

2. offsetParent（定位父级）

在理解偏移大小之前，首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级，而是翻译成定位父级，很大原因是offsetParent与定位有关。定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素。主要分为下列几种情况：

元素自身有fixed定位，offsetParent的结果为null。当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null
元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>。
元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
<body>元素的parentNode是null

3. offsetLeft（offsetTop)

只读
返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界(上边界）偏移的像素值

4. offsetWidth（offsetHeight)

只读
返回该元素的像素高度，高度包含该元素的垂直内边距和边框，其方向上的滚动条，不包含:before或:after等伪类元素的高度。对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。

然而，对于可被截断到下一行的行内元素（如 span），offsetTop 和 offsetLeft 描述的是第一个边界框的位置（使用 Element.getClientRects() 来获取其宽度和高度），而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸（使用 Element.getBoundingClientRect 来获取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。

5. scrollTop（scrollLeft)

获取和设置
元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
scrollTop 可以被设置为任何整数值，同时注意：
- 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0
- 设置scrollTop的值小于0，scrollTop 被设为0
- 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值.

6. scrollHeight（scrollWidth)

只读

一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容

//判断一个元素是否滚动到底部
//如果元素滚动到底，下面等式返回true，没有则返回false.
element.scrollHeight - element.scrollTop === element.clientHeight

7. getBoundingClientReact

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合
元素对于视口区域的距离，当元素发生滚动时，代表位置的属性会随着变化
具体每个属性代表什么距离参照大图

includeios / document

关于元素到窗口距离的一些整理 #1