js中offset、scroll、client、getBoundingClientRect、event坐标位置及视窗系列

鼠标Event坐标位置

鼠标event对象给我们展示了 client offset page screen系列的X Y坐标 可以用于在不同需求下获取鼠标的相对位置

属性	说明
clientX	以浏览器左上顶角为原点，定位 x 轴坐标
clientY	以浏览器左上顶角为原点，定位ｙ轴坐标
offsetX	以当前事件的目标对象content左上角为原点，定位x轴坐标
offsetY	以当前事件的目标对象content左上角为原点，定位y轴坐标
pageX	以Document 对象（即文本窗口）左上角为原点，定位x轴坐标
pageY	以Document 对象（即文本窗口）左上角为原点，定位ｙ轴坐标
screenX	计算机屏幕左上角为原点，定位x轴坐标
screenY	计算机屏幕左上角为原点，定位ｙ轴坐标
layerX	最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位x轴坐标
layerY	最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位ｙ轴坐标

图例

兼容

视窗位置与尺寸

获取视口宽高

下面方法是包括滚动条的宽高，不支持 IE8

window.innerWidth
window.innerHeight

width + padding + border + 滚动条 另外 outerWidth 浏览器兼容差，可获取包括工具栏的宽高

获取窗口的宽高

window.outerWidth
window.outerHeight

获取获取窗口的宽高 (包括工具栏 控制台 地址栏)，兼容差

页面滚动位置

返回整个页面的滚动的位置，获取滚动的高度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) {
    var 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
    }
}

client系列

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 的值，就是边框的宽度

offset系列

offsetWidth/offsetHeight

同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸，这个方法返回元素本身的宽高 + padding + border + 滚动条

offsetLeft/offsetTop

相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值

offsetLeft/offsetTop 返回元素 X Y 坐标值

偏移量

• offsetParent用于获取定位的父级元素
• offsetParent和parentNode的区别

var box = document.getElementById('box');
console.log(box.offsetParent);
console.log(box.offsetLeft);
console.log(box.offsetTop);
console.log(box.offsetWidth);
console.log(box.offsetHeight);

封装

获取元素相对于windowView的距离

function getPostion(element) {
  var pos = {
    left: 0,
    top: 0
  }
  while (element.offsetParent) {
    pos.left += element.offsetLeft;
    pos.top += element.offsetTop;
    element = element.offsetParent;
    //如果有边框要计算入父级边框 
    pos.left += element.clientLeft;
    pos.top += element.clientTop;
  }
  return pos;
}

scroll系列

元素内容的宽高和滚动距离

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 的值

因此可用于处理页面滚动的距离的兼容

汇总

offset系列:获取元素的宽,高,left,top, offsetParent
offsetWidth:元素的宽,有边框
offsetHeight:元素的高,有边框
offsetLeft:元素距离父元素位置的值
offsetTop:元素距离父元素位置的值

scroll系列:卷曲出去的值
scrollLeft:向左卷曲出去的距离
scrollTop:向上卷曲出去的距离
scrollWidth:元素中内容的实际的宽(如果内容很少或者没有内容, 元素自身的宽),没有边框
scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框

client系列:可视区域
clientWidth:可视区域的宽(没有边框),边框内部的宽度
clientHeight:可视区域的高(没有边框),边框内部的高度
clientLeft:左边边框的宽度
clientTop :上面的边框的宽度

getBoundingClientRect：不管元素的当前层级，定位层级 ，top left bottom right x y 都是距离浏览器的左上角
bottom: 底边距离浏览器顶部
height: 元素总高度(height+padding+border)
left: 左边距离浏览器左边
right: 右边距离浏览器左边 right - left = width
top: 顶部距离浏览器顶部
width:  元素总宽度(width+padding+border)
x: 元素左上角顶点距离浏览器左上角顶点的坐标X
y: 元素左上角顶点距离浏览器左上角顶点的坐标Y
      
event鼠标事件的坐标属性，他们都是鼠标指针尖端在触发事件的时候 的坐标位置
clientX clientY：触发事件时鼠标指针距离window窗口左上角的位置
                 坐标原点为 window窗口的左上角 
pageX pageY：触发事件时鼠标指针距离docuemnt文档左上角的位置
             坐标原点为 document文档的左上角 
offsetX offsetY：元素content内容区域的左上角为原点
                以当前事件的目标对象边框内沿左上角为原点，定位x轴坐标
screenX screenY：触发事件时鼠标指针距离 屏幕视窗(显示器)左上角的位置
x y：设置或获取鼠标指针位置相对于父文档的 x y 像素坐标
layerX layerY：触发事件的DOM对象的DOM树上的父级(祖级)中最近的拥有定位属性的元素的左上角为原点 (鸡肋)

视窗系列
window.innerWidth ：浏览器可视区域窗口的width + padding + border + 滚动条
window.innerHeight ：浏览器可视区域窗口的height + padding + border + 滚动条
outerWidth ： 浏览器整体宽度 (包括工具栏 控制台 地址栏)
outerHeight ： 浏览器整体高度 (包括工具栏 控制台 地址栏)
window.pageYOffset ：页面滚动位置，就是获取滚动的高度
document.documentElement.scrollTop || document.body.scrollTop ：获取滚动的高度
window.screenLeft || window.screenX ：窗口在显示器的位置，距离显示器左边的距离
window.screenTop || window.screenY ：窗口在显示器的位置，距离显示器上面的距离