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

Detecting element out of Iframe

I'm working on detecting whether my content is outside the iframe or not. I've been trying a straight forward case, but still not able to detect, basically I'm padding the iframe such that the document inside iFrame goes outside it's body. I somehow…
RightMan
  • 31
  • 3
0
votes
1 answer

why does intersection observer keeps on running?

I want to change the class of the header using intersection observer. The idea here is that I have a header with full height and width and when we scroll down to another div the header shrinks to a small bar. This is my javascript…
kalpeshshende
  • 153
  • 9
0
votes
2 answers

Typescript error when importing Intersection Observer

I will use Intersection Observer API to create an infinite scroll in my React app. However, when importing Intersection Observer to the React component, I get an warning message Could not find a declaration file for module 'intersection-observer'.…
rumon
  • 466
  • 2
  • 8
  • 21
0
votes
1 answer

SEO indexing fails with lazy load images using Intersection Observer API

To improve my site performance I'm trying to lazy load images only when they are available to viewport and to make sure google bot index them. I'm doing lazy loading as per below steps: Created a component using Intersection Observer to lazy load…
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
0
votes
1 answer

IntersectionOberserver with newly appearing Elements

In a react project we have an element "stickyButton" that is fixed on the bottom of the viewport on mobile. It is supposed to be displayed as long as none of some other buttons are visible. So, we try to use IntersectionObserver to check if these…
Sorcy
  • 2,587
  • 5
  • 26
  • 34
0
votes
1 answer

Unable to clear interval when element is outside viewport in Intersection Observer API

I'm trying out Intersection Observer API but I have come to a dead end when I use setInverval with it. So I have this div which have width and height of 500px. If the div is in viewport I want to trigger setInterval which will log something every 3…
Zak
  • 860
  • 16
  • 39
0
votes
0 answers

IntersectionObserver - how to detect a deleted

In my .js script, I need to implement functionality that re-adds a div to a page if a user deletes it by hand, like if they select "Edit as HTML" and just delete a div from the DOM. I did some research about setting up observers with…
Dennis Kozevnikoff
  • 2,078
  • 3
  • 19
  • 29
0
votes
1 answer

Intersection observer and Animated Number Counter

The problem with the code below is that the Counters do not stop at the same time. Is there any way to adjust the duration of the Counters? As far as I know, by using animate function JQuery it is possible to adjust the duration, but I wonder how to…
Mohsen Jalali
  • 1
0
votes
0 answers

removeEventListner is not working. what to do?

I have a section of sliders (created in slider revolution). When I set it to scroll by keyboard arrow keys (up and down) using slider revolution. But it was scrolling the whole page so I used observer to prevent scroll of whole page and only the…
Kunal Khichi
  • 35
  • 7
0
votes
1 answer

Problem highlighting sidebar navigation items on scroll in React with IntersectionObserver

I'm working on a react project and I want to highlight the sidebar nav list when the corresponding section is visible while scrolling, and I used useEffect and IntersectionObserver for that and add an active class to the sidebar nav item with the…
Yinka Adedire
  • 11
  • 2
0
votes
1 answer

how to correctly set the observer at the intersection

how to set intersection observer correctly. When I ask for img it only works on the last element, how to set for each element? So that they load one after another in turn function useOnScreen(options:any){ const ref:any = React.useRef() …
HLEB HLEB
  • 128
  • 8
0
votes
1 answer

Why IntersectionObserver is not applying the classes?

I'm following a tutorial about IntersectionObserver, but I can't seem to get it to work... I'm trying to apply an animation on the elements that are visible in the viewport. I will paste the JS code here and the full example with html and css is…
DisplayName
  • 125
  • 1
  • 16
0
votes
1 answer

Check if an element is in the viewport but with mapped refs - ReactJS

I was wondering if anybody could help. I've been looking into lots of solutions to check when elements are displayed in the viewpoint and am currently trying to integrate this method into my project -…
RepublicOfDavid
  • 15
  • 1
  • 5
0
votes
0 answers

IntersectionObserver doesn't work in Safari

Hello everyone I'm using simple intersectionObserver code for sliding content in from bottom by adding class. It works fine in any other browser and on mobiles but Safari. I can't find information what should I change or do to make it work. Any help…
Norbert Perka
  • 1
  • 3
0
votes
1 answer

Avoid Intersection Observer to observe 2 targets at time

I have some sections and some navigation links in my page. Im using Intersection Observer to add an active class to a respective link that redirect to this section. In some part of my page, 2 sections are visibles i want to add the active class to…
gianlop3z
  • 107
  • 2
  • 9
1 2 3
…
37 38