HTML中元素位置判断的相关方法总结

今天设计妹子有个要求让某个元素出现在浏览器中视口时触发某个动效。感觉是个比较常见的需求，因为浏览器中获取位置的方法实在是又多又杂，索性做个总结以后自己查起来也方便~

window属性相关

• window.screenX,window.screenY 返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离，单位为像素。

• window.innerHeight,window.innerWidth 返回页面（包括滚动条占据的高度和宽度）在当前窗口中的视口高度和宽度，单位为像素。当用户放大网页时，这两个属性会变小，因为每个像素占据屏幕的空间变大了

• window.outerHeight,window.outerWidth 返回浏览器窗口的高度和宽度，包括菜单，边框栏等。

• window.scrollX(window.pageXOffset),window.scrollY(window.pageYOffset) 返回页面的水平和垂直滚动距离，单位为像素。

Element属性相关

Element接口

属性

• Element.clientHeight,Element.clientWidth 表示元素的内部高度和宽度，包括padding但不包括scrollbar，border。属性值会被四舍五入为一个整数。

• Element.clientTop,Element.clientLeft 表示元素上border和左border的宽度。

• Element.scrollHeight,Element.scrollWidth 计量元素内容高度和宽度，包括overflow导致的不可见内容，属性为只读。

• Element.scrollTop,Element.scrollLeft 表示这个元素滚动条距离它顶部与左边的像素距离，可以设置或读取。

方法

• Element.getBoundingClientRect()方法 该方法返回值是一个DOMRect对象，该对象包括一组描述边框的只读属性。 left,right表示左边框和右边框离视口左边的距离。 top,bottom表示上边框和下边框离视口上边的距离。

• Element.getClientRects方法 该方法返回值是一个DOMRect构成的集合，集合内的每一个元素为element内形成的行内框。

HTMLElement子接口

• HTMLElement.offsetTop,HTMLElement.offsetLeft 只读属性，返回当前元素左上角相对于offsetParent元素顶部和左部的距离，单位为像素

• HTMLElement.offsetParent 只读属性，返回一个指向最近的包含该元素的定位元素。当元素的style.display设置为none时，offsetParent返回null。

• HTMLElement.offsetHeight，HTMLElement.offsetWidth 只读属性，返回包括padding+border+scrollbar的高度和宽度且是一个整数，单位为像素。