intersection-observer – Tarik Billa

Same intersection observer for multiple HTML elements

December 27, 2023 by Tarik

Modifying Ruslan’s answer a little because in his answer, multiple Intersection Observer objects are being created. It is possible to observe multiple elements using the same observer by calling .observe() on multiple elements. let observerOptions = { rootMargin: ‘0px’, threshold: 0.5 } var observer = new IntersectionObserver(observerCallback, observerOptions); function observerCallback(entries, observer) { entries.forEach(entry => { … Read more

Intersection Observer fails sometimes when i scroll fast

August 25, 2023 by Tarik

Intersection Observer runs an asynchronous function in a loop which checks the position of observed DOM elements. It’s coupled with the browser’s render cycle and although it’s happening very fast (60fps for most devices, or once every 16.66 miliseconds), if you move the scrollbar faster than those checks happen, the IO API may not detect … Read more

Testing code that uses an IntersectionObserver

May 5, 2023 by Tarik

None of the posted answered worked for me because of our configuration of TypeScript and React (tsx) we’re using. Here’s what finally worked: beforeEach(() => { // IntersectionObserver isn’t available in test environment const mockIntersectionObserver = jest.fn(); mockIntersectionObserver.mockReturnValue({ observe: () => null, unobserve: () => null, disconnect: () => null }); window.IntersectionObserver = mockIntersectionObserver; });

IntersectionObserver callback firing immediately on page load

April 24, 2023 by Tarik

That is the default behaviour. When you instantiate an instance of the IntersectionObserver, the callback will be fired. It is recommended to guard against this case. entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add(‘in-viewport’); } else { entry.target.classList.remove(‘in-viewport’); } }); Also I found this article as well as the docs to be very helpful, … Read more

How do I know the IntersectionObserver scroll direction?

March 5, 2023 by Tarik

I don’t know if handling boundingClientRect will end up on performance issues. MDN states that the IntersectionObserver does not run on the main thread: This way, sites no longer need to do anything on the main thread to watch for this kind of element intersection, and the browser is free to optimize the management of … Read more