IntersectionObserverEntry:intersectionRatio 属性
intersectionRatio
是 IntersectionObserverEntry
接口的只读属性,它告诉你目标元素当前在根元素的交集矩形中可见的百分比,取值范围在 0.0 到 1.0 之间。
值
一个介于 0.0 和 1.0 之间的数字,表示目标元素在根元素的交集矩形中实际可见的百分比。更准确地说,这个值是交集矩形(intersectionRect
)的面积与目标元素的边界矩形(boundingClientRect
)的面积之比。
如果目标元素的边界矩形面积为零,则如果 isIntersecting
为 true
,返回值为 1;如果为 false
,则返回值为 0。
示例
在这个简单的例子中,一个交集回调函数将每个目标元素的 opacity
设置为该元素与根元素的交集比例。
js
function intersectionCallback(entries) {
entries.forEach((entry) => {
entry.target.style.opacity = entry.intersectionRatio;
});
}
要查看更具体的示例,请参阅 处理相交变化。
规范
规范 |
---|
交集观察器 # dom-intersectionobserverentry-intersectionratio |
浏览器兼容性
加载中…