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

Intersection Observer - highlight current section

I'm trying to activate and deactivate a class for navbar items whenever a section is either partially in view or partially out of view. The code works fine if I scroll down or up the page completely. The problem is if I change direction in the…
Eduardo Torres
  • 31
  • 6
3
votes
0 answers

Using Intersection Observer for lazyloading on cloned elements

I have a modified Bootstrap 4 carousel that has multiple items and scrolls one-by-one using this JavaScript: $('.carousel[data-type="multi"] .carousel-item').each(function() { var next = $(this).next(); if (!next.length) { next =…
awal
  • 31
  • 2
3
votes
1 answer

intersection observer polyfill not working Safari

I need to detect if my iframe which is loaded from another domain is in viewport. This works fine native in Chromem,Firefox and IE called Intersection Observer. However this is not working in Safari. There has been created a polyfill for this:…
user3605780
  • 6,542
  • 13
  • 42
  • 67
2
votes
1 answer

Intersection Observer and Accessibility

I am using Intersection Observer on a client's site to lazily load expensive parts of pages until a user scrolls them partially into view. For example, the HTML may look something like the following:

Page…

Lucas Mace
  • 43
  • 6
2
votes
1 answer

Check if an element is being observed, IntersectionObserver

Is there any way to determine if an element is being observed already? if ( element /* is not being observed */ ) observer.observe(element)
oldboy
  • 5,729
  • 6
  • 38
  • 86
2
votes
0 answers

Google Bot is producing JS errors for intersectionObserver

We are using the intersection observer for lazy loading images. It's a stable script since some years, it has been tested against a wide range of browsers and works perfectly well, it doesn't produce any JS errors. However since recently, around a…
Tom Kline
  • 21
  • 3
2
votes
1 answer

Lazy load images on a screen containing multiple horizontal scroll sections, when they're close to the bottom or right of the viewport

Goal: I would like for my images to load once they get close (happens to be 20% in my example) to the right or bottom of the viewport. I want the user to have the experience that the images "have always been there" as they scroll, i.e. as they're…
Nick
  • 101
  • 9
2
votes
1 answer

Circle bar animation not working in Google Chrome but works on other browsers

I have a circle bar animation that should trigger when in view. The effect works on every Browser but in Google Chrome and I can't understand why. Here an example: https://career.foundationbox.studio I made a Pen to isolate the problem:…
Holaloro
  • 23
  • 2
2
votes
0 answers

Lazy loading images with Intersection Observer Api in React by dynamic redux state

I've been trying to create dynamic image elemens which is going to lazy load when images shown on screen. Besides , image src and alt attribute that come from redux state , this state changes with dispatch action. But images just only load first…
aarnautovic
  • 19
  • 4
2
votes
0 answers

Intersectionobserver's callback called twice when there's an await within

I receive 70 results in one go, but i want to break up in chunks of 10 to display to the user. I'm trying to make it seem like there's infinite scrolling and loading happening. however, when i'm trying to set a delay of 1 sec, load count starts…
user21116876
  • 21
  • 1
2
votes
1 answer

javascript | how to trigger an event after the user has scrolled by some amount

I want an event to be triggered after the user scrolls, say 300px after another event happens. To put simply, an example would be: I want the user to first press a button and then after pressing the button when he scrolls by some amount, an event is…
marsian8
  • 133
  • 6
2
votes
1 answer

Detect when scrolled below element

I would like to detect a user's scroll and make an element fixed to top by adding a class when it's reached by scolling and below. The class should be removed when the user is scrolling above the element. I can't use the css property position:…
Meek
  • 3,086
  • 9
  • 38
  • 64
2
votes
0 answers

Intersection Observer not working as expected for horizontal scroll (X-axis)

I'm using lozad.js which internally uses intersection observer for lazy loading images. I have a carousel where I need the images on next slide which are not on viewport yet to be loaded to better the performance of the website. Basically load n+1th…
decay24
  • 21
  • 1
2
votes
1 answer

React - page flickering on new component entering DOM

We have been trying to display component on the bottom of the page (sticky action bar), if certain components are not in view (using intersection observer). Suddenly, the page started flickering. This is our onScreen hook: const useOnScreen =…
Dragana
  • 101
  • 1
  • 3
  • 8
2
votes
1 answer

Delay Intersection Observer in React

My goal: Console log elements only if they are still visible I have a list of elements that I'm passing to my component. const list = [{id: 0, title: 'Title 0'}, {id: 1, title: 'Title 1'}, {id: 2, title: 'Title 2'}] I want to render that list and…
DomanskaGrzyb
  • 38
  • 1
  • 6
1 2 3
…
37 38