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

问题描述

据我了解，一旦您设置 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

JSFiddle Demo