Intersection Observer API 中的 rootMargin 和 threshold 之间的主要区别是什么?
What is the main difference between rootMargin & threshold in Intersection Observer API?
据我了解,一旦你设置了rootMargin:"0px",这意味着当你选择的元素已经完成在屏幕上可见并且相对于视口或任何相关的边距为 0px。
在阈值属性中,它的值从0%到100%,也表示为0到1。
这意味着如果值为 1,回调将 运行 一旦元素在视口上 100% 可见。
请标出它们之间的区别。
rootMargin 是围绕您的根的矩形边界框,您可以调整它以触发交叉点。默认情况下,这是您的视口。当元素位于根的某个区域内时,使用它来触发交叉点,即当我观察到的元素达到视口的 25% 或视口的 50px 时触发。值可以是 % 或 px。即 rootMargin: '0px 0px -50px'
或 rootMargin: '0px 0px -25%'
.
threshold 是观察到的元素在根中的百分比。当观察到的元素的百分比在根内时,使用它来触发交集,即当我的元素的 65% 在视口(根)内时触发。值是基于 0 和 1 之间的百分比。即 threshold: .65
据我了解,一旦你设置了rootMargin:"0px",这意味着当你选择的元素已经完成在屏幕上可见并且相对于视口或任何相关的边距为 0px。
在阈值属性中,它的值从0%到100%,也表示为0到1。 这意味着如果值为 1,回调将 运行 一旦元素在视口上 100% 可见。
请标出它们之间的区别。
rootMargin 是围绕您的根的矩形边界框,您可以调整它以触发交叉点。默认情况下,这是您的视口。当元素位于根的某个区域内时,使用它来触发交叉点,即当我观察到的元素达到视口的 25% 或视口的 50px 时触发。值可以是 % 或 px。即 rootMargin: '0px 0px -50px'
或 rootMargin: '0px 0px -25%'
.
threshold 是观察到的元素在根中的百分比。当观察到的元素的百分比在根内时,使用它来触发交集,即当我的元素的 65% 在视口(根)内时触发。值是基于 0 和 1 之间的百分比。即 threshold: .65