JS判断元素是否在可视区域

释义：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
}