Stack Overflow
Stack Overflow

Questions tagged [intersection-observer]

Javascript IntersectionObserver is an API for finding intersections of DOM elements.

The JavaScript Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. (Source: MDN)

566 questions
70
votes
6 answers

How do I know the IntersectionObserver scroll direction?

So, how do I know the scroll direction when the event it's triggered? In the returned object the closest possibility I see is interacting with the boundingClientRect kind of saving the last scroll position but I don't know if handling…
Jose Paredes
  • 3,882
  • 3
  • 26
  • 50
54
votes
2 answers

IntersectionObserver callback firing immediately on page load

I'm very new to the IntersectionObserver API, and I've been experimenting with this code: let target = document.querySelector('.lazy-load'); let options = { root: null, rootMargin: '0px', threshold: 0 } let observer = new…
rpivovar
  • 3,150
  • 13
  • 41
  • 79
50
votes
7 answers

Testing code that uses an IntersectionObserver

I have a JavaScript component in my application that handles infinite scroll pagination, and i'm trying to rewrite it to use the IntersectionObserver, as described here, however I'm having issues in testing it. Is there a way to drive the behavior…
Raibaz
  • 9,280
  • 10
  • 44
  • 65
38
votes
2 answers

Intersection Observer fails sometimes when i scroll fast

I have a little issue with the Intersection Observer API, It works good for me, but. When I scroll fast (very fast) on my webpage, the Intersection Observer API fails sometimes to detect the pretense of an element in the viewport. When I scroll…
Zarma Tech
  • 381
  • 1
  • 3
  • 4
29
votes
3 answers

Same intersection observer for multiple HTML elements

I am trying to make it so that as some text items stop overlapping a dark background, they will individually change color one by one as the user scrolls. All of the text items are position: fixed EDIT: The MDN docs say (emphasis mine): The…
Ollie Williams
  • 1,996
  • 3
  • 25
  • 41
24
votes
7 answers

Jest testing react component with react-intersection-observer

I'm trying to test a component that has a child component that includes react-intersection-observer but I always get an error I tried to import the library but it still fails. This the initial test beforeEach(() => { testContainer =…
Rafael Simões
  • 347
  • 1
  • 4
  • 12
24
votes
3 answers

Intersection Observer when element leaves the viewport

Is there a way to detect if an element leaves the viewport using Intersection Observers? For example, I have an element on the screen that I want to fire a callback when the top of the element hits the top of the viewport. From MDN: The…
Barry Horbal
  • 375
  • 1
  • 3
  • 9
24
votes
4 answers

Force IntersectionObserver update

Is there any way to force an update/run of an IntersectionObserver instance? The callback will be executed by default, when the viewport has changed. But I'm looking for a way to to execute it when other events happen, like a change of elements. An…
eisbehr
  • 12,243
  • 7
  • 38
  • 63
23
votes
1 answer

Trigger IntersectionObserver when element is already in viewport

The IntersectionObserver is triggered when an element is visible in the viewport for a certain amount (0-100%). This means, when the element is already 100% in the viewport it does not trigger anymore, as there is no change on the threshold. I have…
s1gr1d
  • 385
  • 3
  • 11
22
votes
1 answer

How to observe DOM element position changes

I need to observe a DOM element position as I need to show a popup panel relative to it (but not in the same container) and the panel should follow the element. How I should implement such logic? Here is a snippet where you can see the opening of…
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
22
votes
1 answer

Should an IntersectionObserver be disconnected when element is removed

In a Single Page Application, elements are often removed and replaced. On elements that are removed from the DOM there could be an IntersectionObserver(or any other kind) For events I never bothered to care because they are bound and triggered on…
René
  • 6,006
  • 3
  • 22
  • 40
21
votes
7 answers

Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'

I'm watching a video on Intersection Observer and I've copied his script word for word and I'm somehow getting this error. Someone had the same error but solved their problem by changing querySelectorAll to querySelector. Even when I copied their…
Joheb
  • 423
  • 1
  • 3
  • 7
19
votes
1 answer

One intersectionObserver to observe many elements or one intersectionObserver per element

We have a few CustomElements in our page and some of them have an IntersectionObserver relative to the viewport observing them. That number might be increasing as the designer seems to like intersection animations. Will that lead to performance…
Sergio Tx
  • 3,706
  • 1
  • 16
  • 29
17
votes
1 answer

Intersection Observer: Call a function only once per element

I'm using the Intersection Observer API to track the visibility of multiple element on a web page. When an element becomes visible, a function callback() should be executed. The restriction: For each element, the function may only be executed…
stekhn
  • 1,969
  • 2
  • 25
  • 38
17
votes
2 answers

Intersection observer does not work with target with position: fixed

I am trying to invoke a callback via intersection observer. I want the target to be style: "position: fixed" and move it via style.top. I also specified the root element which is an ancestor of the target with style: "position: relative". But…
krave
  • 1,629
  • 4
  • 17
  • 36
1
2 3
…
37 38