Intersection Observer API 中 rootMargin 和阈值的主要区别是什么?

Iba*_*ikh 6 javascript viewport threshold intersection-observer

据我所知,一旦你设置了rootMargin:"0px",这意味着当你选择的元素在屏幕上完全可见并且相对于视口或任何相关元素有 0px 的边距时,就会产生效果。

Threshold 属性中,它的值从 0% 到 100% 也表示为 0 到 1。这意味着如果该值为 1,则一旦元素在视口上 100% 可见,回调就会运行。

请强调它们之间的差异。

Sam*_*l G 8

rootMargin是根周围的矩形边界框,您可以调整它以触发交叉点。默认情况下,这是您的视口。当元素位于根的特定区域内时,即当我观察到的元素达到视口的 25% 或视口的 50px 时触发,使用它来触发交叉。值可以是 % 或 px。即rootMargin: '0px 0px -50px'rootMargin: '0px 0px -25%'

阈值是根中观察到的元素的百分比。当观察到的元素的一定百分比位于根内时,即当我的元素的 65% 位于视口(根)内时触发,使用此触发交叉点。值基于 0 到 1 之间的百分比。即threshold: .65

JSFiddle 演示