释义:Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
如果是标准盒子模型,元素的尺寸等于width/height + padding + border-width的总和。
如果box-sizing: border-box,元素的的尺寸等于 width/height。
const rectObject = object.getBoundingClientRect();
const {left,top,right,bottom}=rectObject;
- rectObject.top:元素上边到视窗上边的距离;
- rectObject.right:元素右边到视窗左边的距离;
- rectObject.bottom:元素下边到视窗上边的距离;
- rectObject.left:元素左边到视窗左边的距离;
图示
function isEleVisible(ele){
var {top, right, bottom, left} = ele.getBoundingClientRect()
var w = window.innerWidth
var h = window.innerHeight
if(bottom < 0 || top > h){
// y 轴方向
return false
}
if(right < 0 || left > w){
// x 轴方向
return false
}
return true
}