IntersectionObserverEntry:intersectionRatio 属性

Baseline 已广泛支持

此功能已成熟,并可在多种设备和浏览器版本上运行。自 2019 年 3 月以来,它已在所有浏览器中可用。

intersectionRatioIntersectionObserverEntry 接口的只读属性,它告诉你目标元素当前在根元素的交集矩形中可见的百分比,取值范围在 0.0 到 1.0 之间。

一个介于 0.0 和 1.0 之间的数字,表示目标元素在根元素的交集矩形中实际可见的百分比。更准确地说,这个值是交集矩形(intersectionRect)的面积与目标元素的边界矩形(boundingClientRect)的面积之比。

如果目标元素的边界矩形面积为零,则如果 isIntersectingtrue,返回值为 1;如果为 false,则返回值为 0。

示例

在这个简单的例子中,一个交集回调函数将每个目标元素的 opacity 设置为该元素与根元素的交集比例。

js
function intersectionCallback(entries) {
  entries.forEach((entry) => {
    entry.target.style.opacity = entry.intersectionRatio;
  });
}

要查看更具体的示例,请参阅 处理相交变化。

规范

规范
交集观察器
# dom-intersectionobserverentry-intersectionratio

浏览器兼容性