简体繁体 English

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

[英]What is the main difference between rootMargin & threshold in Intersection Observer API?

原文 2020-09-27 12:30:45 4 1 javascript/ viewport/ threshold/ intersection-observer

As I learned that once you have set rootMargin:"0px" , it means that the effect will be produced when the element you have selected has been completed visible on screen and have 0px of margin with respect to the viewport or any relative.据我了解，一旦您设置了rootMargin:"0px" ，这意味着当您选择的元素在屏幕上完全可见并且相对于视口或任何相关元素的边距为 0px 时，将产生效果。

In threshold property , it has values from 0% to 100% also denoted as 0 to 1. It means that if the value is 1, the callback will run once the element is 100% visible on the viewport.在阈值属性中，它具有从 0% 到 100% 的值，也表示为 0 到 1。这意味着如果值为 1，则一旦元素在视口上 100% 可见，回调将运行。

Please highlight the differences between them.请突出它们之间的差异。

1 个解决方案

rootMargin is the rectangular bounding box around your root that you can adjust to trigger intersections. rootMargin是围绕您的根的矩形边界框，您可以调整它以触发相交。 By default, this is your viewport.默认情况下，这是您的视口。 Use this to trigger an intersection when an element is within a certain area of the root ie trigger when my observed element reaches 25% of the viewport or 50px of the viewport.当元素位于根的某个区域内时，使用它来触发交集，即当我观察到的元素达到视口的 25% 或视口的 50px 时触发。 Values can be % or px.值可以是 % 或 px。 ie rootMargin: '0px 0px -50px' or rootMargin: '0px 0px -25%' .即rootMargin: '0px 0px -50px'或rootMargin: '0px 0px -25%' 。

threshold is the percentage of the observed element within the root. 阈值是根中观察到的元素的百分比。 Use this to trigger an intersection when a percentage of the observed element is within the root ie trigger when 65% of my element is within the viewport (root).当观察到的元素的百分比在根内时，使用它来触发交集，即当我的元素的 65% 在视口（根）内时触发。 Values are % based between 0 and 1. ie threshold: .65值是基于 0 和 1 之间的百分比。即threshold: .65

JSFiddle Demo JSFiddle 演示