javascript 如果指定的元素在视口中可见,则返回true,否则返回false

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 如果指定的元素在视口中可见,则返回true,否则返回false相关的知识,希望对你有一定的参考价值。

/*
Use Element.getBoundingClientRect() and the window.inner(Width|Height) values to determine if a given 
element is visible in the viewport. 
Omit the second argument to determine if the element is entirely visible, 
or specify true to determine if it is partially visible.
*/
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  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;
};

以上是关于javascript 如果指定的元素在视口中可见,则返回true,否则返回false的主要内容,如果未能解决你的问题,请参考以下文章

CSS3-动画元素如果在视口中可见(页面滚动)

Jquery检查元素在视口中是不是可见[重复]

javascript 在视口中可见

text 在视口中可见的元素

javascript 在可见视口区域重置视频#js #jquery #video

获取视口Java语言中的所有元素