Intersection Observer & Efficient Scroll Handling

const options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '50px 0px',
  threshold: 0
};

It changes the size of the observed element
It modifies the root element's dimensions
It creates a margin around the root's bounding box
rootMargin effectively creates a margin around the root element's bounding box, growing or shrinking the area where intersections are calculated. It works similar to CSS margin and accepts values in pixels or percentages. Positive values expand the root's bounding box, while negative values shrink it. This is particularly useful for: 1) Preloading content before it becomes visible by using positive margins, 2) Creating a buffer zone for infinite scroll triggers, 3) Adjusting the observation area without modifying the actual root element, 4) Fine-tuning when intersection detection occurs relative to the viewport or root element.
It adjusts the scroll sensitivity