整理获取 viewport 和 element 尺寸和位置方法
⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅
视口页面或窗口的位置和宽高
获取视口宽高
下面方法是包括滚动条的宽高，不支持 IE8
window.innerWidth
window.innerHeight
width + padding + border + 滚动条 另外 outerWidth 浏览器兼容差，可获取包括工具栏的宽高
页面滚动位置
返回整个页面的滚动的位置，pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致，前者是后者的别名，建议使用前者，不支持 IE8
window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
窗口在显示器的位置
标准浏览器使用的是 screenX/screenY，IE 中使用的是 screenLeft/screenTop
window.screenLeft || window.screenX
window.screenTop || window.screenY
元素几何尺寸和位置
元素占用的空间尺寸和位置
getBoundingClientRect
使用方法 getBoundingClientRect() 返回的值见下图：
IE 只返回 top right bottom left 四个值，如果需要 width height 则需要计算：
function getBoundingClientRect(elem) {
let rect = elem.getBoundingClientRect()
return {
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
width: rect.width || rect.right – rect.left,
height: rect.height || rect.bottom – rect.top
}
}
clientWidth/clientHeight
返回元素不含滚动条的尺寸，不包括边框
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
如果是 document.documentElement，那么返回的是不包含滚动条的视口尺寸
如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸
clientLeft/clientTop
返回的是计算后的 CSS 样式的 border-left-width/border-top-width 的值，就是边框的宽度
offsetWidth/offsetHeight
同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸，这个方法返回元素本身的宽高 + padding + border + 滚动条
offsetLeft/offsetTop
相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值
offsetLeft/offsetTop 返回元素 X Y 坐标值
计算元素的位置：
function getElementPosition(e) {
var x = 0, y = 0;
while (e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent; // 获取最近的祖先定位元素
}
return {
x: x,
y: y
};
}
元素内容的宽高和滚动距离
scrollWidth/scrollHeight
这个方法返回元素内容区域的宽高 + padding + 溢出内容尺寸
document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight
如果元素是 document.documentElement，返回的是视口滚动区域宽度和视口宽度中较大的那个
如果元素是 document.body，并且是在混杂模式下，那么返回的是视口滚动区域宽度和视口宽度中较大的那个
scrollLeft/scrollTop
这个方法返回元素滚动条的位置
如果元素是根元素，那么返回 window.scrollY 的值
如果元素是 body，并且在混杂模式下，那么返回的是 window.scrollY 的值
因此可用于处理页面滚动的距离的兼容
请关注我的订阅号，不定期推送有关 JS 的技术文章，只谈技术不谈八卦 ????