Intersection Observer Real Case: Automatic Toc Update

Recently, while working on a Table of Contents feature, I found it to be a great case for using the Intersection Observer. By listening to specific elements, we can automatically update the status of the TOC.

In the past, we might have needed to use methods like getBoundingClientRect to calculate whether an element had left the viewport, but with the new browser API to detect whether elements enter the viewport, it has become much easier to implement.

Recently, I launched a series of real-world cases that front-end developers encounter in their daily work: showcasing the thought process behind solving problems and the implementation results.

If you’re interested, feel free to check out the recent article: Intersection Observer Real Case: Automatic Toc Update🔗