getBoundingClientRect判断dom元素是否在可视区

简介

Element.getBoundingClientRect()方法返回left, top, right, bottom, x, y, width,具体可以见下图：

业务场景用法:

记录一个我最近业务当中要实现图片在可视区进行图片懒加载效果，因此需要用到这个方法来判断元素是否位于可视区内，由于不常用，这里记录下，省去网上到处找，还不详细。

css
 .box {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 10px;
    border: 2px solid #000;
    position: absolute;
    margin-top: 2000px;
  }
      
js
 const box = document.querySelector(".box");
     //判断是否位于可视区
      window.addEventListener("scroll", (e) => {
        console.log(
          box.getBoundingClientRect().top <=
            document.documentElement.clientHeight
            ? "在可视区内部"
            : "不在可视区"
        );
      });

图解：