判断DOM元素是否位于视窗内

判断DOM元素是否位于视窗内，先来介绍一个方法，Element.getBoundingClientRect()  方法返回元素的大小及其相对于视口的位置。

它们的值是相对于视口的，而不是绝对的。当滚动位置发生了改变，top和left属性值就会随之立即发生变化。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值。

知道了元素相对视口的位置，通过window.innerHeight和window.innerWidth获取视口的大小，然后比较差值判断元素位置。

function isInViewport(dom){
    // 兼容写法
    let viewPortHeight = window.innerHeight || documentElement.clientHeight
    let viewPortWidth = window.innerWidth || documentElement.clientWidth
    let { 
        top,
        left, 
        bottom, 
        right
     } = dom.getBoundingClientRect()
    
    return (
        top >=0 &&
        left >=0 &&
        bottom <= viewPortHeight &&
        right <= viewPortWidth
    )
}