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
8
votes
6 answers

IntersectionObserver not working in Safari or iOS

I have a piece of code that adds a different css class to elements depending on whether they're scrolled into or out of the viewport from top or bottom. It uses the Intersection Observer because it is supposed to handle large amounts of elements…
Jascha Goltermann
  • 1,074
  • 2
  • 16
  • 31
8
votes
5 answers

Gatsby - IntersectionObserver is not defined

I am trying to build my gatsby project but I am unable due to the IntersectionObserver not being recognized. I use the intersectionObserver inside an InView component: import React, { useRef, useState, useEffect } from 'react' const InView = ({…
Aiden Barrett
  • 329
  • 1
  • 4
  • 11
8
votes
1 answer

How to use intersection observer polyfill with Vue cli 3?

How to use: https://github.com/w3c/IntersectionObserver/tree/master/polyfill Should i load it in a webpack config - vue.config.js or should i load it in a .vue template using imports?
Alexander Kim
  • 17,304
  • 23
  • 100
  • 157
8
votes
1 answer

IntersectionObserver rootMargin's positive and negative values are not working

The code for setting the rootMargin is shown below. let observerOptions = { root: null, rootMargin: "100px", threshold: [] }; When I set it to 100px, the root element's bounding box isn't growing 100px; when I set it to -100px, the root…
Ian Y.
  • 2,293
  • 6
  • 39
  • 55
7
votes
0 answers

Intersection Observer does not trigger on fast scroll

I have a list and on its top and bottom (first/last child) there are sentinels divs. Those are observed by their observers. Infinite in-place scroll logic works nicely up until you scroll too fast. I think that the scroll is so fast that the…
Mike
  • 809
  • 6
  • 20
7
votes
0 answers

JavaScript: Intersection Observer VS Scrolling

I want to test large content rendering efficacy so, I use two ways to test speed when scrolling 10000 text div // getBoundingClientRect function lazyLoading_useRect() { let root = document.getElementById('root'); …
Mazs Li
  • 161
  • 6
7
votes
1 answer

How to get all entries using Intersection Observer API?

I want to make left side navigation showing the current visible section. But my sections have different height and I can't figure out how to properly track them. It would be better if my callback function every time it is invoked could see all…
Serge
  • 71
  • 1
  • 4
7
votes
0 answers

Dark Mode getting messed up with intersectionObserver

I've been working on a site and I decided to add a dark mode feature to it, I used the darkmode.js library to implement it , the library works on the principle of mix-blend-mode: difference. However, when I add a scroll animation to it using…
Himanshu Sardana
  • 123
  • 2
  • 10
7
votes
0 answers

Intersection Observer issue when user scrolls fast and ref object stays on the view

I have issues with Intersection Observer only if user scrolls the bar fast, or force the scroll to stay at the button. Unfortunately, the new data arrives, but since user holds the scrollbar down, the ref object stays on the view. This issue happens…
Selina
  • 153
  • 3
  • 14
7
votes
1 answer

How to detect element visibility (z-index, fixed, opacity etc) (Intersection Observer V2 alternative)

Intersection Observer V2 will introduce new features to detect actual visibility based on factors such as opacity, z-index and fixed positioning. Info: https://developers.google.com/web/updates/2019/02/intersectionobserver-v2 Question: is there an…
optimalisatie
  • 341
  • 1
  • 11
7
votes
1 answer

Intersection Observer doesn't works properly when a CSS Transform brings the element inside viewport

I initialise an Intersection Observer without specific options so the threshold equals to 0.0 and the event should trigger just when the first pixel of the observed element enters the viewport. That's what happens when I trigger the observer by…
dgnin
  • 1,565
  • 2
  • 20
  • 33
6
votes
0 answers

Intersection Observer: can it be used to detect collision between two elements of a container?

In the example code below, isIntersecting is always true, probably because the intersecting subject is the parent itself. Is there a way to use IntersectionObserver to detect the intersection/collision between the two boxes? The idea was to use this…
darksoulsong
  • 13,988
  • 14
  • 47
  • 90
6
votes
2 answers

IntersectionObserver does not work on small screens for long sections JS

This script issues the active class for the active section. Recently noticed that it stops working on small screens. Even in the developer's console in chrome, I will start to increase the screen size and it will appear, as soon as I start to reduce…
user15250555
6
votes
0 answers

Using Intersection Observer to check if an element is fully visible on browser viewport

After a page loads, I’d like to observe an element (addonCard) using the Intersection Observer API to know if that element is fully visible or not. If the element is invisible or partially visible, I want the element to be scrolled into full…
Kuthumi Pepple
  • 151
  • 6
6
votes
2 answers

Mock for intersection observer in jest and typescript

If we use jest with typescript, which have an intersection observer used, the mocking of intersection observer will become hard. So far I'm at: beforeEach(() => { // IntersectionObserver isn't available in test environment const…
Asim K T
  • 16,864
  • 10
  • 77
  • 99
1 2
3
…
37 38