domRect 对象包含了一组用于描述边框的只读属性left、top、right、bottom、x、y以及width、height，单位为像素。

除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

该对象的width和 height 值包含元素的 border 和 padding。

getBoundingClientRect会受到transform的影响。比如你的元素设置了transform:scale(2), 那么getBoundingClientRect返回的width会是元素实际宽度的2倍,top等位置信息也会因为元素尺寸变化而发生变化.

元素的offsetWidth包含 border、 padding、content的宽度。
元素的clientWidth仅包含元素的 padding、content的宽度。

代码实现：

partiallyVisible为是否为完全可见

function elementIsVisibleInViewport(el, partiallyVisible = false) {
  const {top, left, bottom, right} = el.getBoundingClientRect()
  return partiallyVisible ?
    ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
    ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) :
    top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
}

链接: https://www.fly63.com/article/detial/10856