关于元素到窗口距离的一些整理 #1
Description
关于元素到窗口距离的一些整理
在做懒加载和一些高度改变的动画时，我们需要知道元素在窗口中的位置，下面是这次整理的一些元素偏移量介绍
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() 方法返回的一组矩形的集合
- 元素对于视口区域的距离，当元素发生滚动时，代表位置的属性会随着变化
- 具体每个属性代表什么距离参照大图