IntersectionObserver accepts several threshold values
- Published at
- Updated at
- Reading time
- 1min
This post is part of my Today I learned series in which I share all my web development learnings.
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!
Related Topics
Related Articles
- How to create an API wrapper using a JavaScript proxy
- "fetch" supports a "keepAlive" option to make it outlive page navigations
- A clipboard magic trick - how to use different MIME types with the Clipboard API
- Keyboard button clicks with Space and Enter behave differently
- VS Code supports JSDoc-powered type checking