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
16
votes
1 answer

Intersection Observer API: Observe the center of the viewport

I am trying to observe the intersection at center of viewport, I have tried with passing negative values in rootMargin rootMargin: '-45% 10% -45%' But it doesn't seems to be working properly. My requirement is to observe the intersection when my…
Nutan Gwari
  • 205
  • 4
  • 9
15
votes
3 answers

Detect whether element is above or below the viewport on intersect leave with intersection observer

I am currently using the intersection observer to detect when an element leaves the viewport. It is setup like this: const el = document.querySelector('#el') const observer = new window.IntersectionObserver(([entry]) => { if (entry.isIntersecting)…
bravokiloecho
  • 1,413
  • 5
  • 22
  • 39
15
votes
5 answers

IntersectionObserver with React & Hooks

I'm trying to track element visibility with React/Hooks and the Intersection Observer API. However, I can't figure out how to set up observation with "useEffect". Does anybody have any idea how could I do that? Mine solution does not…
pawel_s
  • 295
  • 1
  • 2
  • 13
13
votes
1 answer

How to make a React component fade in on scroll using IntersectionObserver, but only once?

I am trying to give components a fade-in effect in React when the user scrolls, but I want the fade-in effect to only happen the first time the element moves into the viewport. Currently, the code I am using causes a fade-in every time the element…
klaurtar1
  • 700
  • 2
  • 8
  • 29
13
votes
2 answers

IntersectionObserver: how rootMargin work?

I want intercep an intersection when the target element is at 100px from the intersection root for make it, i have setted rootMargin with '100px 0px 100px 0px'. In this example the intersection become when the first pixel of target element (red…
ar099968
  • 6,963
  • 12
  • 64
  • 127
13
votes
1 answer

Use IntersectionObserver with rootMargin to change when reaching 50% viewport height

I'm completely flummoxed by the rootMargin property of intersection observer. My goal is to add a class to an element when half it's height has crossed the vertical center of the viewport. In my current project, nothing I do seems to impact the…
mrwweb
  • 1,344
  • 2
  • 12
  • 22
12
votes
0 answers

intersectionObserver only fires once

I'm attempting to use the new Intersection Observer API, but I can only get to fire its event just once. I believe I'm using it correctly, as I'm using the MDN example almost verbatim. https://jsfiddle.net/bukzor/epuwztn0/106/ function…
bukzor
  • 37,539
  • 11
  • 77
  • 111
11
votes
5 answers

Change style header/nav with Intersection Observer (IO)

Fiddle latest I started this question with the scroll event approach, but due to the suggestion of using IntersectionObserver which seems much better approach i'm trying to get it to work in that way. What is the goal: I would like to change the…
KP83
  • 616
  • 1
  • 10
  • 34
11
votes
1 answer

Create Feature detection for One Javascript Feature (intersectionObserver)

Is there a way of storing a built-in javascript method in a variable to set different behaviour for when this method isn't available in certain browsers? My specific case is for intersectionObserver which isn't available in Safari or older MS…
pjk_ok
  • 618
  • 7
  • 35
  • 90
10
votes
3 answers

Reference error: Can't find variable: IntersectionObserver

I'm trying to use IntersectionObserver in cordova 8.0.0 app which is running on ios 13. When I inspect my app via safari, I see an error on intialization: ReferenceError: Can't find variable: IntersectionObserver This would suggest, that…
Janisko Psisko
  • 131
  • 1
  • 1
  • 8
10
votes
1 answer

How to bind dynamically generated element to Intersection Observer?

This is the code that I'm using: var ob = new IntersectionObserver(entries => { for(var entry of entries){ console.log('works'); } }); document.querySelectorAll('dynamicElement').forEach(elem => ob.observe(elem)); This is working…
Marcel
  • 123
  • 5
9
votes
0 answers

IntersectionObserver does not intercept elements with display contents

It looks like IntersectionObserver never considers elements with display: contents in the viewport. This behaviour makes sense for display: none but I find it counter-intuitive for display: contents. The use case of having a clean wrapper which only…
Daniel
  • 6,194
  • 7
  • 33
  • 59
9
votes
4 answers

Determine how much of the viewport is covered by element (IntersectionObserver)

I'm using the IntersectionObserver to add and remove classes to elements as they enter the viewport. Instead of saying "when X% of the element is visible - add this class" I would like to say "when X% of the element is visible or when X% of the…
powerbuoy
  • 12,460
  • 7
  • 48
  • 78
9
votes
2 answers

How to debounce or throttle Intersection Observer?

I am using the Intersection Observer API and I was wondering: How can I debounce or throttle the Intersection Observer API? If I want to increase the performance, do you recommend to use a debounce or throttle function?
Alfrex92
  • 6,278
  • 9
  • 31
  • 51
9
votes
1 answer

IntersectionObserver isIntersecting property never is false if threshold greater than 0

If I configure the threshold value to anything greater than 0, isIntersecting never returns false when the target leaves the viewport. However, if I leave the default threshold at 0, isIntersecting will return false when the target exits the…
snewcomer
  • 2,020
  • 1
  • 19
  • 22
1
2
3
…
37 38