Intersection Observer API 中的 rootMargin

Question

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

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

请强调它们之间的区别。

Answer 1

rootMargin是围绕您的根的矩形边界框，您可以调整它以触发交叉点。默认情况下，这是您的视口。当元素位于根的某个区域内时，使用它来触发交叉点，即当我观察到的元素达到视口的 25% 或视口的 50px 时触发。值可以是 % 或 px。即rootMargin: '0px 0px -50px'或rootMargin: '0px 0px -25%'。threshold是根中观察到的元素的百分比。当观察到的元素的百分比在根内时，使用它来触发交集，即当我的元素的 65% 在视口（根）内时触发。值是基于 0 和 1 之间的百分比。即threshold: .65