元素可视区操作之client系列offset系列以及scroll系列

元素可视区操作之client系列offset系列以及scroll系列

1、client系列

ele.clientTop: 返回元素上边框大小
ele.clientLeft: 返回元素左边框大小
ele.clientWidth: 返回元素宽度，包括padding，不包括边框，返回值不带单位，不包括滚动条
ele.clientHeight: 返回元素高度，包括padding，不包括边框，返回值不带单位，不包括滚动条

2、offset系列

ele.offsetParent: 返回该元素带有定位的父级元素，如果父级元素都没有定位，则返回body
ele.offsetTop: 返回该元素相对于有定位的父元素上部偏移
ele.offsetLeft: 返回该元素相对于有定位的父元素左部偏移
ele.offsetWidth: 返回元素宽度，包括padding和边框，返回值不带单位，包括滚动条
ele.offsetHeight: 返回元素高度，包括padding和边框，返回值不带单位，包括滚动条

3、scroll系列

ele.scrollTop: 返回被卷的元素的上部距离，返回值不带单位
ele.scrollLeft: 返回被卷元素的左部距离，返回值不带单位
ele.scrollHeight: 返回元素自身的实际高度，包括padding，超出容器时内容会超出，padding-bottom会被覆盖；不包括边框
ele.scrollWidth: 返回自身实际宽度，包括padding，不包括边框

注意： 如果是页面被卷的头部，使用window.pageYOffset获取被卷值，页面被卷左侧的话使用window.pageXOffset;元素被卷才是使用scrollTop和scrollLeft

补充：页面被卷去头部的兼容性解决方案

1、声明了DTD,使用document.documentElement.scrollTop
2、未声明DTD，使用document.body.scrollTop
3、新方法：window.pageYOffset,从IE9开始支持
兼容性写法：

function getScroll() {
	return {
		left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
		top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
	}
}
1
2
3
4
5
6