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

Does Intersection Observer works from inside of a cross-domain iframe, with respect to the viewport?

Is there a way to determine from inside of a cross-domain iframe if the iframe is in view or not? I was trying to achieve this using Intersection Observer API. But it seems to work only for same-domain iframe and not cross-domain. I checked the…
panghal0
  • 531
  • 4
  • 10
6
votes
0 answers

IntersectionObserver to detect if scrollY > 0 on body?

Can new IntersectionObserver() be used to detect if a user is at the top of the page (scrollY = 0) VS. when scrollY > 0 (user has scrolled down)? Because I tried this and can't get it to work: var myObs = new IntersectionObserver(function (entry) { …
user1945912
  • 597
  • 3
  • 9
  • 19
6
votes
1 answer

How to call different functions for different targets using an Intersection Observer?

I'm using the Intersection Observer API on a site. For every instance of using it, I'm using the same config (main viewport). My issue is that I need to have different things happen when the callback is fired. For some, I want to lazy load an image.…
Mike
  • 73
  • 1
  • 3
6
votes
1 answer

IntersectionObserver iOS & Safari

My goal is to change position to a video element if the user scrolls further to the video element. I'm using Intersection Observer API because I need to handle the page scroll from an AdForm Banner/iFrame. Here is my code: function createObserver()…
alex18min
  • 69
  • 1
  • 1
  • 3
5
votes
1 answer

Intersection Observer API: Callback function is not triggered on intersection

There is a Vue custom directive for lazy loading export default { mounted: el => { function loadImage() { console.log("loadImage called!") el.src = el.dataset.src } //loadImage(); function…
Andrey Yaroshenko
  • 155
  • 9
5
votes
1 answer

Intersection Observer in Typescript throws error in useRef

I have here a text animation that is working perfect. What I want to add now is an Intersection Observer so that the animation only starts once I scroll down to the Box. So what I did to achieve this is: I used the react hook useRef to use as…
user18943198
5
votes
1 answer

- loading='lazy' vs Intersection Observer?

I'm building a React app which is very image heavy, all from API calls. I've got loading='lazy' on all of them but it got me wondering if more can be done? I know you can achieve a similar result using intersection observers and only rendering them…
AndyGUY
  • 73
  • 4
5
votes
1 answer

Intersection Observer trigger when element is visible (before scrolling)

I am trying to work with the Intersection Observer API. I have a function which works in my first iteration. The basic logic is that if the user scrolls down and adds or removes items from a basket, once the basket is in view again (as it is at the…
lharby
  • 3,057
  • 5
  • 24
  • 56
5
votes
1 answer

Intersection Observer fine tuning for different window sizes

This is my code so far: const mediaInViewport = document.querySelectorAll('.media'); const links = Array.from(document.querySelectorAll('.link')); let actLink = links[0]; document.body.addEventListener('click', (event) => { if…
Anna_B
  • 820
  • 1
  • 4
  • 23
5
votes
1 answer

Mock "isIntersecting" from Intersection Observer in Jest

I have a component using intersection observer and want to test in a jest test the effects if the element is intersecting. I already managed to mock the Intersection Observer like in this answer: https://stackoverflow.com/a/58651649/4716214 Now I…
maidi
  • 3,219
  • 6
  • 27
  • 55
5
votes
1 answer

What is the main difference between rootMargin & threshold in Intersection Observer API?

As I learned that once you have set rootMargin:"0px", it means that the effect will be produced when the element you have selected has been completed visible on screen and have 0px of margin with respect to the viewport or any relative. In threshold…
Ibad Shaikh
  • 2,704
  • 3
  • 15
  • 27
5
votes
1 answer

How to check initially if an element is intersecting using IntersectionObserver

Goal: I want to perform one action for a group of elements which are intersecting on page load and handle all others(which are currently not intersecting) individually. Issue: Every observer has its own callback and I can't get result for a group of…
Antoan Elenkov
  • 711
  • 1
  • 5
  • 20
5
votes
1 answer

Use Intersection Observer to add different classes to elements when scrolled into view from top or bottom

I have a piece of jQuery code that adds a css class to elements when they are scrolled into the viewport and removes that class when they are scrolled out of the viewport. So far the code works like this: When an element is scrolled into the…
Jascha Goltermann
  • 1,074
  • 2
  • 16
  • 31
5
votes
3 answers

How to delay intersection observer API

The Situation I have a fixed nav bar at the top of the page. As you scroll down through different sections of the page the nav bar dynamically updates (underlines and highlights). You can also click a section on the nav bar and it will scroll down…
Luke
  • 323
  • 4
  • 11
5
votes
0 answers

IntersectionObserver when element is centered

I want to fix an elements position when it's perfectly centered. Currently it's being fixed when it's fully visible and hence snaps to the center. - Can I somehow observe when the element is centered? const box =…
Tom
  • 3,672
  • 6
  • 20
  • 52
1 2 3
…
37 38