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
0
votes
2 answers

CSS animation with 'IntersectionObserver' doesn't work (Vanilla JS)

I'm having issues with my InsersectionObserver code: The content of the .timeline-graphs class should be appearing from bellow (@keyframes animation in CSS), but only when the the viewport intersects with it, thanks to InsersectionObserver (JS).…
JS3DX
  • 11
  • 2
0
votes
1 answer

How to get ".active" class always only for the last observed object?

This is my code so far: // Click Function $('body').on('click', 'a', function() { $('a.active').removeClass('active'); $(this).addClass('active'); }); // Scroll Function const mediaInViewport =…
Anna_B
  • 820
  • 1
  • 4
  • 23
0
votes
3 answers

Problem and intersection observe how to make the code run at each element?

I have a problem all works but the animation code is executed as soon as an element is detected, all the animations are already made while they are not yet in the screen, it does not appear according to their visibility. how to restore the order in…
gerald ferron
  • 67
  • 1
  • 9
0
votes
1 answer

IntersectionObserver and transform transition

my first post on Stackoverflow I'm trying to build a simple scroll effect with intersectionObserver. The idea is when an item is out of the viewport, it is scale to 0, and scales to 1 when is fully visible. I really don't know if it is the good way…
constantin
  • 1
  • 1
0
votes
1 answer

Infinite Scroll using Algolia on React

I'm trying to implement infinite scrolling on my react app for search hits from Algolia. I came across a class component in their documentation. And I use React Hooks so tried to make it work on React Hooks. All I got was so many renders and my app…
Sarath Dev
  • 83
  • 1
  • 1
  • 9
0
votes
1 answer

IntersactionObserver() only observes the first element of a row instead of all

I'm experimenting with IntersectionObserver(), and it's behaving weirdly: I'm using a very simple layout, just 8 images in the same div with flexbox, using wrap, so basically the 8 images are positioning themself in different rows, according to the…
Andrea De Nuzzo
  • 13
  • 3
0
votes
1 answer

How to add a class to a link if assigned media is in viewport?

I coded this: // Click Function $('body').on('click', 'a', function() { $('a.active').removeClass('active'); $(this).addClass('active'); }); // Scroll Function const sectionIsInViewport = document.querySelector('section'); observer = new…
Anna_B
  • 820
  • 1
  • 4
  • 23
0
votes
0 answers

IntersectionObserver misses detection sometimes with fixed header over sections of different brightness

I adapted the code from this question to my situation where I need to change the "brightness" of my header links depending of the section's background scrolling under. It works pretty well but sometimes it feels like it's missing the detection as…
flks
  • 610
  • 10
  • 28
0
votes
1 answer

IntersectionObserver working scrolling down but not scrolling up

I am using IntersectionObserver to highlight the current section's corresponding nav item. Everything seems to be working fine unless I scroll upwards. When I do that, the section I just left gets isIntersecting: false (as it should) but the one I…
Vito
  • 179
  • 1
  • 14
0
votes
2 answers

JS - IntersectionObserver - Argument 1 does not implement interface Element

I'm trying to add a class 'is-visible' to all elements of a class 'module' using IntersectionObserver when they come into view on scrolling. I get the error: IntersectionObserver.observe: Argument 1 does not implement…
Wasteland
  • 4,889
  • 14
  • 45
  • 91
0
votes
1 answer

Calling setState when IntersectionObserver threshold is reached?

I'm using react-spring and IntersectionObserver to animate some div elements on my page. For the IntersectionObserver, I am using a hook given by the tutorial here. CodeSandbox While I am able to get the div to rotate by itself (onClick), and the…
Carrein
  • 3,231
  • 7
  • 36
  • 77
0
votes
4 answers

Infinite Scroll With Intersectionobserver & InnerHTML

I'm trying to make an infinite scroll (without jQuery) to show more results in a page. I'm using an IntersectionObserver to detect a div called #paginate and everytime it enters the screen, the #result div will be refreshed. var result =…
haZh
  • 127
  • 2
  • 12
0
votes
0 answers

Intersection observer not working in Safari

I am creating a simple navbar, which toggles background (via class ".nav-bg"), when it reaches end of first page (".hero"). It works 10/10 on Firefox/Chrome but doesn't work on Edge and Safari. I can't figure out why. Code: const observer = new…
user12714160
0
votes
0 answers

IntersectionObserver not executing function when intersection conditions are met

I'm trying to use IntersectionObserver with React. What I'm trying to do is to get a function to run when the bottom 25% of a div comes into view. I created a createObserver function and wrapped it in a useEffect so that a the interSection observer…
Opp
  • 520
  • 1
  • 8
  • 21
0
votes
3 answers

IntersectionObserver unobserve not working on target in callback?

I'm trying to add elements to the page as the user scrolls down. When the last element comes into view fully I want the observer callback to be called, a new element created, the observer set up to observe the new element and to no longer observe…
Stefan Bajić
  • 374
  • 4
  • 14
1 2 3
…
37 38