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

Intersection observer - How do you remove a class after leaving the view port

I am adding a class when a div gets into the viewport using Intersection Observer. I just can't figure out how to remove the class when the div leaves the viewport. This is what I have so far: const callback = function (entries) { …
wgoodman
  • 71
  • 7
0
votes
1 answer

Intersection observer Animated elements already on page sporadically working

I am trying to animate elements using intersection observer but I'm getting odd behaviour from elements already on the screen at page load. They randomly sometimes animate correctly and other times do not. const faders =…
Daniel Black
  • 11
  • 2
0
votes
1 answer

Intersection Observer API with react

I am trying to create a navigation tracker on a page where a user scrolls with the intersection observer API and a tracker shows what section on the page in react like something shown in the website with this link https://olaolu.dev/ with the boxes…
Ayodele
  • 35
  • 1
  • 6
0
votes
0 answers

Intersection Observer: how to use addClassList on all elements of the same class

I am trying to trigger the CSS animations of my page in the user's viewport only. Meaning the animation will start only once the element is visible. For that I decided to use the Intersection Observer but it only add my class to the first element…
StaniBik
  • 3
  • 4
0
votes
1 answer

how to use intersection observer to show/hide an element

need to show nava if wrapt is not visible by scrolling the page and vice versa - hide the nava if wrapt is visible what is wrong with this JS code ? let io = new IntersectionObserver((entries) => { entries.forEach(entry => { …
qadenza
  • 9,025
  • 18
  • 73
  • 126
0
votes
1 answer

Intersection observer for multiple videos on the same page

I have a portfolio page made in WordPress and on the page I have 5 videos that need to be played when in viewport and stopped when out of viewport. I have used the following script that works only on the first video on the page. const video =…
Simonan
  • 3
  • 3
0
votes
1 answer

react js infinite scroll without third party library

Hi I'm new to react js and would like to implement infinite scroll without any help of third party/library. I achieved the infinite scroll, but there is problem. The problem is that for example my initial search is ant man movie, and then I try to…
Muhammad Haekal
  • 477
  • 6
  • 22
0
votes
1 answer

Why do IntersectionObservers created in a function continue to work after the function call finishes

Reading through the Mozilla Developer Network explanation of the IntersectionObserver, I encountered this section which is part of an example use case for the IntersectionObserver. The way that the article is creating the IntersectionObserver works…
wjjd225
  • 57
  • 11
0
votes
1 answer

Detect div visibility when browser position is out of the screen using Intersection Observer in Javascript

I need to detect visibility of a div which is on the viewport. I see that the Intersection Observer Api triggers on visibility change events when the browser is on the screen but doesn't trigger an event when the browser dragged out from screen and…
Cansın Memiş
  • 55
  • 2
  • 10
0
votes
0 answers

intersection observer not redoing animations

const images = document.querySelectorAll('#anim'); let options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } observer = new IntersectionObserver((entries)=>{ console.log(entries); …
Joey Larsen
  • 15
  • 5
0
votes
0 answers

Can Intersection Observer be used to check if an element has crossed the middle of the viewport?

I understand how to use Intersection Observer to check if an element has entered the viewport, such as the code below: const el = document.querySelector('#el') const observer = new window.IntersectionObserver(([entry]) => { if…
Quddus George
  • 962
  • 2
  • 14
  • 30
0
votes
1 answer

Sticky Nav Header with React Hooks and IntersectionObserver API

Basically my goal is to translate this StickyNav implementation to ReactJS and keep the cross-browser compatibility: https://codepen.io/smashingmag/pen/XWRXVXQ The main problem I have is to find the proper way to implement the direction and…
eliasturbay
  • 13
  • 3
0
votes
2 answers

Simple counters - dataset not working properly

I am working on a site that has a lot of counters and I have a problem getting the [data-speed] to create different counter speeds depending on the number in that counter. When I run this forEach loop I always get the same speed, the function gets…
AntunCrnja
  • 109
  • 2
  • 10
0
votes
1 answer

How do I use a single IntersectionObserver to perform unique callbacks per observed element?

I need to know out when dozens of HTMLElements are inside or outside of the viewport when scrolling down the page. So I'm using the IntersectionObserver API to create several instances of a VisibilityHelper class, each one with its own…
M -
  • 26,908
  • 11
  • 49
  • 81
0
votes
0 answers

How to use Intersection Observer instead of window.onscroll?

I have the current JS for a modification to the navbar and a scroll-to-top button: const navbar = document.querySelector('nav'); const scrolltotop = document.querySelector('.scrolltotop'); window.onscroll = () => { if (window.scrollY > 300 &&…
Peleke
  • 891
  • 2
  • 10
  • 23
1 2 3
…
37 38