js工具函数之某dom节点是否在可视范围之内

直接上代码

function elementIsVisibleInViewport(el, partiallyVisible = false) {
  // 第一个参数是element  第二个参数是 是否部分可见也算可见  
  // 设置为false 即有一部份不可见即不可见
  // 设置为true 即部分可见即算是可见
  const {
    top,
    left,
    bottom,
    right
  } = el.getBoundingClientRect();
  const {
    innerHeight,
    innerWidth
  } = window;
  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;
}

// 调用 测试
function test() {
  let show = document.querySelector("#show");
  console.log(elementIsVisibleInViewport(show, true))
}

代码解析

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

返回值是一个对象，这个对象是一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

以可视区域左上角为坐标 0， 0

left代表element的左侧边缘到可视区左侧的距离

right 代表element的右侧边缘到可视区左侧的距离

top 代表 element 的上边缘到可视区域上边的距离

bottom 代表  element 的下边缘到可视区域上边的距离

通过这四个值和可视区域的宽高即可判断。