首页 > 其他分享> 文章详细

三大家族（offset，client，scroll）

2021-10-28 14:00:30 阅读：138 来源： 互联网

标签：body parent 元素 client offset var scrollTop document scroll

偏移量offset

offset是偏移、位移、补偿的意思，offset家族由offsetWidth、offsetHeight、offsetLeft、offsetTop、offsetParent等组成，使用这些属性可以获取元素的实际宽高和元素到父元素的距离

offsetLeft、offsetTop：元素外边距到父元素的边框内侧，其实就是元素的margin + 父元素的padding，不包含边框。如果没有定位父元素，则获取到body元素的距离

offsetWidth ： width + border + padding
offsetHeight ： height + border + padding
offsetLeft ： margin-left + 定位父元素的padding-left
offsetTop ： margin-top + 定位父元素的padding-top
offsetParent ：是一个只读属性，用于获取最近一个定位父元素

客户区client

clientLeft ： clientLeft = border
clientTop ： clientTop = border
clientWidth ： width + padding（如果有滚动条，也不包含滚动条）
clientHeight ： height + padding（如果有滚动条，也不包含滚动条）

滚动scroll

scrollLeft、scrollTop ：获取滚动出元素可视区域的距离。
scrollWidth ： width + padding (如果内容超过元素范围，则获取到内容的高和宽)
scrollHeight ： height + padding (如果内容超过元素范围，则获取到内容的高和宽)

窗口信息

谷歌浏览器需要将document.body改为document.documentElement

document.body.clientWidth ：网页可见区域宽
document.body.clientHeight ：网页可见区域高
document.body.offsetWidth ：网页可见区域宽（包括边线的宽）
document.body.offsetHeight ：网页可见区域高（包括边线的高）
document.body.scrollTop ：网页被卷去的高
document.body.scrollLeft ：网页被卷去的左
document.body.scrollWidth ：网页正文全文宽
document.body.scrollHeight ：网页正文全文高

IE兼容示例

页面滚出去的距离

function getScroll(){
    var scrolLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    return{
        scrolLeft:scrolLeft,
        scrollTop:scrollTop
    }
}

鼠标距离文档顶部的距离

//鼠标距离文档顶部的距离 = clientY + 页面被滚动处理的长度
function getPage(e) {
    var pageX = e.pageX || e.clientX + getScroll().scrolLeft;
    var pageY = e.pageY || e.clientY + getScroll().scrollTop;
    return{
        pageX:pageX,
        pageY:pageY
    }
}

常用获取位置Js方法

绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。
首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

但这里要注意一个问题：要考虑offsetParent的border的宽度。

我们需要不断的累加offsetLeft，而且要考虑border存在的情况。另外要注意offsetParent并不一定是父元素，offsetParent指的是有定位属性的的父元素
```
// 获取元素在页面上的绝对位置
function getElementPageLeft(element){
	var actualLeft=element.offsetLeft;
	var parent=element.offsetParent;
    while(parent!=null){
		actualLeft+=parent.offsetLeft+parent.clientLeft;
		parent=parent.offsetParent;
	}
	return actualLeft;
}
	
function getElementPageTop(element){
	var actualTop=element.offsetTop;
	var parent=element.offsetParent;
	while(parent!=null){
		actualTop+=parent.offsetTop+parent.clientTop;
		parent=parent.offsetParent;
	}
	return actualTop;
}
```

相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。
有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。

//获取元素在页面上的相对于窗口的位置
function getElementViewLeft(element){
	var actualLeft = getElementPageLeft(element);
	//获取页面滚动距离
	var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft
	return actualLeft-scrollLeft;
}

function getElementViewTop(element){
	var actualTop = getElementPageTop(element);
	var scrollTop=document.body.scrollTop||document.documentElement.scrollTop
	return actualTop-scrollTop;
}

getBoundingClientRect

获取元素的相对位置，JS还提供了一种更简单的方法：Element.getBoundingClientRect()

Element.getBoundingClientRect()返回一个对象，对象包含了元素距离窗口的位置属性：left、right、top、bottom,还包含width、height属性

主要是right和bottom要解释一下，right是指右边到页面最左边的距离，bottom是指底边到页面顶边的距离。

浏览器兼容性

ie5以上都能支持，但是又一点点地方需要修正一下，

IE67的left、top会少2px,并且没有width、height属性。

标签：body,parent,元素,client,offset,var,scrollTop,document,scroll
来源： https://www.cnblogs.com/shandou/p/15475308.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9