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

Angular infinite scrolling strategy with IntersectionObserver

I've been reading a lot about infinite scrolling strategies as I need to implement this functionality in my component. However, there seems to exist a lot of different approaches and the examples I've seen are not the most straight forward and easy…
Manuel Brás
  • 413
  • 7
  • 21
0
votes
1 answer

intersection observer with react components

I'm trying to figure out how I can use the intersection observer to work with components. For instance if I use:
Observe me and see what happens...
everything works fine. But as soon as I use the ref for a…
derek _
  • 29
  • 6
0
votes
1 answer

Why the callback of Intersection Observer API is executed when even viewport didn't reach the threshold?

const imgTargets = document.querySelectorAll('img[data-src]'); const loadImg = function (entries, observer) { const [entry] = entries; if (!entry.isIntersecting) return; // Replace src with data-src entry.target.src =…
Gia Phu Tang
  • 101
  • 6
0
votes
1 answer

ReactJS ,Intersection Observer , GSAP (don't animate out)

So I've only been working a couple of months in ReactJS, so please excuse me if the solution is simple. I'm using the intersection observer from react-use to trigger a gsap animation once the desired section is in viewport. Now I don't want it to…
Figo22
  • 21
  • 1
0
votes
1 answer

What causes this failure to execute observe on IntersectionObserver?

I am working on a pure JavaScript infinite scroll with the help of the Intersection Observer API. The scrollable items are posts from the jsonplaceholder.typicode.com API. I load 5 posts initially, then 5 more with every scroll to the…
Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252
0
votes
0 answers

How to lazy load my article card using Intersection Observer?

I have an HTML page where I arranged 6 cards using a CSS grid. I want them to lazy load those cards using Intersection Observer. At a first glance, people will see only two or three cards in a row according to the viewport width, after scrolling…
Shahab 570
  • 27
  • 6
0
votes
1 answer

How to scroll and follow active state on links on a fixed height scrollable sidebar?

I am working on a blog layout which have its content on the left side and a 'table of contents' sidebar on the right. The sidebar is fixed with a full viewport height but scrollable incase the items inside are too many. It is also worth noting that…
Zak
  • 860
  • 16
  • 39
0
votes
1 answer

IntersectionObserver, Loads images right away instead of lazy-load

I'm trying to lazy-load images using IntersectionObserver. However, all images are loaded right away, before they enter the viewport via scroll. I know this because I look in the Network tab and Inspector to see where they're at before I scroll…
user984003
  • 28,050
  • 64
  • 189
  • 285
0
votes
1 answer

Correct set of intersection observer

currently I'm stuck on correct setting of Intersection observer. I would say it's working like on half, but it still doesn't have desired behavior. My goal is to make interactive menu which responds to section, which is currently observed. I would…
Pinnci
  • 423
  • 2
  • 5
  • 20
0
votes
1 answer

Looking for a modern(akin to an "Observer", without the "scroll" event) way to add body class based on scroll direction

The end goal is to add a scrolling-up class to the body element when the user is scrolling up the page and remove said class when scrolling down. I am achieving this the old school way, by attaching a throttled(via lodash) callback to the scroll…
Hlsg
  • 3,213
  • 2
  • 12
  • 17
0
votes
2 answers

MVC Intersection Observer structure

I wonder if someone can assist me with MVC architecture. I took a course in MVC from Udemy and now I have a pet project I'm working on. In a nutshell. I have three JS files: controller, model and view. I am watching activeHeading2 element and it a…
user7927819
0
votes
1 answer

single intersection observer for multiple entries

cannot fully understand the IntersectionObserver in the example below, everything works fine, but I'm trying to write only one single observer for multiple entries and I'm getting various error messages. Pls, help let io = new…
qadenza
  • 9,025
  • 18
  • 73
  • 126
0
votes
0 answers

IntersectionObserver is not working on scroll up

I have one sticky navbar where a list item highlights when its corresponding section is viewed via scroll and I am using IntersectionObserver. I am getting problem only for the first item which has its section defined immediately after the sticky…
Naina kalia
  • 11
  • 3
0
votes
2 answers

toggleClass removes all other existing classes

My goal is to add/replace new classes to body, dynamically provided by the "id" variable below. That variable's value is the actual id of each section that passes into the viewport on scroll. So as different sections (obviously with different ids)…
pjldesign
  • 387
  • 1
  • 3
  • 17
0
votes
0 answers

Add/Remove classes to body on scroll

I have a function that adds a class current to a menu item when its corresponding section comes into view. How would I go about also adding/removing different classes to body as well, based on currently visible section? Edit: Per suggestion got it…
pjldesign
  • 387
  • 1
  • 3
  • 17
1 2 3
…
37 38