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