text 在视口中可见的元素

Posted

tags:

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

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;
};
// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
elementIsVisibleInViewport(el); // false - (not fully visible)
elementIsVisibleInViewport(el, true); // true - (partially visible)

Returns true if the element specified is visible in the viewport, false otherwise.

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.

以上是关于text 在视口中可见的元素的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法只使用javascript检查一个元素在视口中是不是可见? [复制]

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

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

text 元素在视口中

剧作家 - 如何检查元素是不是在视口中?

如何仅在视口之外的元素上执行 jquery Waypoints?