关于前端中遇到各种高度宽度的总结

最近一直在看关于懒加载组件和无限下拉组件的实现，遇到了各种需要获取dom高度、滚动的高度、浏览器可视区的高度...，索性今天对各种高度进行一次总结，省的每次遇到总要找谷哥、度娘。

element.clientHeight:可视区高度，不包括border的高度,如果底部有滚动条也不包括滚动条的高度

element.clientWidth可视区宽度，不包括border的宽度,如果有滚动条也不包括滚动条的宽度

element.offsetHeight：表示自身高度，包括border的值，如果底部有滚动条包括滚动条的高度

element.offsetWidth表示自身高度，包括border的值，如果有滚动条包括滚动条的宽度

element.offsetTop:返回元素的垂直偏移位置。

element.offsetLeft:返回元素的水平偏移位置。

element.scrollHeight:返回元素的整体高度。

element.scrollWidth:返回元素的整体高度。

element.scrollLeft:返回元素左边缘与视图之间的距离。

element.scrollTop:返回元素上边缘与视图之间的距离。

element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置：

　　获取某个元素的信息（高版本：left,top,bottom,right,width,height）单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
　　注意：获取的值是会根据滚动条变化的。

 

window.scroolY:window垂直方向上已滚动的距离,一般用 window.pageYOffset代替

window.scroolX:window水平方向上已滚动的距离,一般用 window.pageXOffset代替

window.innerHeight:浏览器窗口视口的高度

window.screen：提供包含有关用户屏幕的信息

判断滚动元素是否已经滚动到底部

（element.clientHeight + element.offsetTop）-  element.scrollHeight <= 0

转载于:https://www.cnblogs.com/voll/p/8434660.html