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

Question

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.

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.

Please highlight the differences between them.

Answer 1

rootMargin is the rectangular bounding box around your root that you can adjust to trigger intersections. 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. Values can be % or px. ie rootMargin: '0px 0px -50px' or 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). Values are % based between 0 and 1. ie threshold: .65

JSFiddle Demo