IntersectionObserverEntry: intersectionRect 属性

基线 广泛可用

此功能已经成熟,并在许多设备和浏览器版本上运行。 它自 2019 年 3 月.

报告反馈

The IntersectionObserverEntry interface's read-only intersectionRect property is a DOMRectReadOnly object which describes the smallest rectangle that contains the entire portion of the target element which is currently visible within the intersection root.

A DOMRectReadOnly which describes the part of the target element that's currently visible within the root's intersection rectangle.

示例

This rectangle is computed by taking the intersection of boundingClientRect with each of the target's ancestors' clip rectangles, with the exception of the intersection root itself.

在这个简单的例子中,一个交集回调存储交集矩形,供以后绘制目标元素内容的代码使用,以便只重绘可见区域。
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    refreshZones.push({
      element: entry.target,
      rect: entry.intersectionRect,
    });
  });
}

规范

js
规范
# Intersection Observer

浏览器兼容性

dom-intersectionobserverentry-intersectionrect