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

IntersectionObserver detect scrolled n px from top?

Using the IntersectionObserver you can detect if an element has scrolled into viewport, but is is possible to detect if the viewport itself has scrolled a certain number of px from the top? What I'm trying to do: I have an infinite scroll set up…
GN.
  • 8,672
  • 10
  • 61
  • 126
3
votes
0 answers

How do you use refs with a map function and Intersection Observer?

I'm trying to create an animated timeline on react with a map function and intersection observer so each part of the timeline loads sequentially. I'm having trouble with the refs as I believe the ref only links to the last item on the map? I have…
Darbjm
  • 31
  • 3
3
votes
0 answers

IntersectionObserver fires erroneously 'true' on page load (Gatsby)

I'm trying to use the IntersectionObserver API to trigger animations when an element gets into the viewport on my Gatsby site. Actually, it works as expected. There is just one thing I can't wrap my head around. After the component mounts, the…
kmuenster
  • 43
  • 1
  • 3
3
votes
0 answers

Classnames mismatch using Material-UI and NextJS

Using Intersection Observer API I'm trying to render a Material-UI Component by visibility on the viewport. export default function Index() { const [onScreen, theRef] = useOnScreen({ rootMargin: "-300px", ssr: true }); const classes…
Luis Toubes
  • 31
  • 4
3
votes
1 answer

IntersectionObserver.observe is not an object, how to use IntersectionObserver

I am creating a table with sticky columns using css position: sticky. I want to style the columns differently when they are "stuck". My first project involves styling the first column or .wdtscroll td:nth-child(1) when the second column partially…
noobdev
  • 31
  • 1
  • 2
3
votes
1 answer

Intersection Observer cannot increase only the top rootMargin

I'm trying to increase only the top value of the rootMargin by 50px. The code I'm using for the option is rootMargin: '50px 0px 0px 0px'. And that isn't working. Although using rootMargin: '50px 0px' can work for my case, I have no desire to…
Ian Y.
  • 2,293
  • 6
  • 39
  • 55
3
votes
2 answers

Can Intersection observer be used to calculate/trigger at specific offset top of target?

TL,DR: I don't care how much of the target container is visible, I just want to know when the target container reaches a specific offset from top of the viewport (window). Should I stick with the good old scroll event or can this be done with…
Hudri
  • 188
  • 3
  • 18
3
votes
1 answer

IntersectionObserver Polyfill won't load in IE11

I am using IntersectionObserver and have a polyfill that should load if the browser isn't compatible. Unfortunately, things aren't working in IE11. In console, I can see an error that IntersectionObserver is undefined. I'd expect this if I wasn't…
user2874270
  • 1,312
  • 2
  • 18
  • 31
3
votes
2 answers

Intersection Observer triggering callback twice on ngAfterViewInit

I tried to lazy load images using Intersection Observable in my angular 7 application. I called Intersection Observable from ngAfterViewInit lifecycle hook. But when i load the application, callback is called twice, once with all the isIntersecting…
Ram
  • 451
  • 10
  • 18
3
votes
2 answers

Why intersection observer triggers on component mount?

Following is the sample example I was trying to understand intersection observer: function Test(props) { const loadingRef = useRef(null); useEffect(() => { let options = { root: null, rootMargin: '0px', threshold: 1.0 …
johnnash
  • 424
  • 2
  • 8
  • 17
3
votes
1 answer

Sticky header implementation with IntersectionObserver

I'm doing sticky header implementation - I dont want to use position: sticky; because I dont see good polyfill for it so I'm trying to use IntersectionObserver API instead. The problem is - I dont really like the behaviour it provides as its entries…
godblessstrawberry
  • 4,556
  • 2
  • 40
  • 58
3
votes
1 answer

IntersectionObserver failling to detect the intersecttion when root element is set

I have an IntersectionObserver observing an img that works perfectly fine when the root is set to null (viewport). However when i set the root element to be another img element the observer fails to detect the intersection between the two. after…
Gimy boya
  • 447
  • 5
  • 22
3
votes
2 answers

How can I use Intersection Observers to tell when something is taking up the entire viewport?

It's pretty easy to tell with an intersection observer when the entirety of an element in within the viewport. The code is roughly like so: // get an element const thingIWantEntirelyInView = $("#Thing")[0]; const checkInView = new…
Seph Reed
  • 8,797
  • 11
  • 60
  • 125
3
votes
2 answers

Intersection observer thresholds value not working

Thresholds option in Intersection Observer doesn't seem to work. To give more context, my list items are rendered in viewport and I want each item to observe on viewport's Intersection observer. The thing is, I need to observe them in steps of 25%.…
Vineet 'DEVIN' Dev
  • 1,183
  • 1
  • 10
  • 35
3
votes
0 answers

intersectionObserver - I would my slide stop to move when an option box reaches one of boundary-side of the container

I'm trying to build an intersection observer allowing my UI to stop a slide transition when the first or last box of included in a container option to reach the boundaries of the container. Hence, the slide is always filled with the box options and…
Webwoman
  • 10,196
  • 12
  • 43
  • 87
1 2 3
…
37 38