offset-client-scroll

偏移量 (offset dememsion)

　　从名字可以看出，偏移量是指发生位移的量。

 

定位父级 (offsetParent)

拥有四个方向上的属性：

• offsetTop
• offsetRight
• offsetBottom
• offsetLeft

其中关于offsetParent的值有如下几种情况:

1. 自带fixed的元素，本身的offsetParent为null
2. 元素自身无fixed定位, offsetParent是body
3. 元素自身无定位，父级存在定位，offsetParent是最近经过定位的父级元素
4. body元素的offsetParent是null

offsetWidth和offsetHeight

这两个属性计算的长度是边框、正文、内边距的总和，有如下特点：

• 是只读属性，可以用来进行计算。
• 修改元素样式时，需要一 x + 'px'的形式进行修改。
• 直接获取元素的x.style.width和height是带px的值，同时只能获取元素内部的样式。

offsetTop系列

这类属性是子元素距离最近的已经定位的父元素的边框与边框之间的距离。

如果父级元素没有进行定位，则继续向上寻找，最终是body.

 

求出当前元素在页面上的偏移量

此方法主要通过计算子元素与已经定位的父元素的边框距离以及父元素与其上一层定位的父元素的距离以及除子元素的为的边框距离的总和。示例代码如下：

function getLeft(obj){
				let actualLeft = obj.offsetTop;
				let parent = obj.offsetParent;
				
				while(parent != null){
					actualLeft = actualLeft + parent.clientLeft + parent.offsetTop;
					console.log(parent)
					parent = parent.offsetParent;
				}
				return actualLeft + 'px'
			}

　　

client家族

从名字我们就可以看出这是客户端，其表示的是客户端的大小，具有如下几个特点：

• clientWidth = width + padding-left + padding-right
• clientHeight = height + padding-top + padding-bottom
• clientLeft 左边框的大小
• clientTop 上边框的大小

注意：1. 所有的client属性都是只读，即不能修改。

　　   2. 将元素的display属性设置为none时，其client属性都为0

　　   3. 获取client属性很消耗资源，重复获取会降低网页性能，建议提前获取。

scroll家族

1. scrollHeight, 表示元素的总高度，包含由于溢出而无法在网页上的不可见部分
2. scrollWidth, 表示总宽度，同上。
3. scrollTop, 距离滚动顶端的像素， 可读可修改。
4. scrollLeft， 距离左端， 同3.

注意：无滚动条的时候，scrollHeight和clientHeight相同。

　　当滚动条滚动到底部时，scrollHeight = clientHeight + scrollTop;

一个回到顶部的方法

window.scrollTo(x,y) 分别代表x轴， y轴