IntersectionObserver accepts several threshold values (#tilPost)

The IntersectionObserver API is a fairly new API that helps developers to figure out if an element is visibile or becomes visible. during scroll. It solves the problem of using costly operations like calling getBoundingClientRect inside of scroll handlers which can lead to janky scrolling.

Dan Callahan wrote an article on this topic and even when I spent a lot of time digging IntersectionObservers (I give a talk about it) he mentioned something that I missed so far.

Usually you initialize an IntersectionObserver like this:

// this fires when:
//   1. The target begins entering the viewport (0 < ratio < 1).
//   2. The target fully leaves the viewport (ratio <= 0).
let observer = new IntersectionObserver(handler, {
    threshold: 0
});

The snippet above defines a single threshold for the IntersectionObserver. But it is also possible to define several thresholds!!!

// this fires when:
//   1. The target begins entering the viewport (0 < ratio < 1).
//   2. The target fully enters the viewport (ratio >= 1).
//   3. The target begins leaving the viewport (1 > ratio > 0).
//   4. The target fully leaves the viewport (ratio <= 0).
let observer = new IntersectionObserver(handler, {
  threshold: [0, 1]
});

I have no idea how I could miss that!