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

Setting intersection observer's threshhold in pixels? or something like that?

I am making a navigation which highlights the currently active page. I have an intersection observer that observes the 3 sections I have, the threshold is set to 0.5 (50%) which will trigger when 50% of a page is visible on the screen but, the…
Unnat
  • 398
  • 2
  • 12
4
votes
0 answers

Avoid handle IntersectionObserver when use window.scrollTo with behavior smooth

I'm creating a landing page using nuxt, I use hash to indicate each route on my page, for this I'm using scrollBehavior to handle hash on route and scroll to section with smooth: router: { scrollBehavior: async (to, from, savedPosition) => { …
Hans Felix Ramos
  • 4,264
  • 3
  • 16
  • 40
4
votes
0 answers

Sticky nav using intersection observer flickering with fixed height

I'm working on implementing a sticky nav using the intersection observer API. The sticky class is added when the header element is not intersecting. However, when I scroll to the end of the header and to the next section, right at that threshold,…
Sarah Blahovec
  • 41
  • 2
4
votes
1 answer

Jest + React: IntersectionObserver mock not working?

In my component.test.js, I tried mocking the IntersectionObserver by doing something like this: const mock = ()=>({ observe: jest.fn(), disconnect: jest.fn() }); window.IntersectionObserver =…
dawg
  • 111
  • 3
  • 12
4
votes
2 answers

IntersectionObserver doesn't work while using nuxt-link

I use IntersectionObserver to add a class whenever a element is visible so I can add a fade-in/out animation in my nuxt project. It work well but if I change the page with nuxt-link (or go back to the same page) IntersectionObserver doesn't add the…
Victor Allegret
  • 2,344
  • 3
  • 18
  • 31
4
votes
1 answer

IntersectionObserver and position: absolute

IntersectionObserver does not seem to work when the observed element has position: absolute and the root is not the viewport. Am I missing something here? (Try removing the position: absolute to see the expected result.) let intersectionRoot =…
swelet
  • 8,192
  • 5
  • 33
  • 45
4
votes
2 answers

How to update list of items with Infinite scroll when new item added

I have implemented infinite scroll on React.js Here is my infinite scroll component which is working fine. import React, {useRef,useCallback} from 'react'; function InfiniteScrollContainer(props) { let {children,loadMore,hasMoreItems,classes}…
Maxim
  • 68
  • 1
  • 7
4
votes
1 answer

CSS selector for element that's in view

Is there a CSS selector for things that are in view, i.e. visible within the viewport?
P Varga
  • 19,174
  • 12
  • 70
  • 108
4
votes
0 answers

Is calling IntersectionObserver.unobserve() strictly required?

Recently I've been using Intersection Observers in React (16.4+) as follows: const myRef = React.useRef(null); React.useLayoutEffect(() => { const observer = new IntersectionObserver( doWork, { rootMargin: "0px 0px 0px 0px" } ); …
JavascriptLoser
  • 1,853
  • 5
  • 34
  • 61
4
votes
2 answers

React issues with createRef for nested navigation + IntersectionObserver

I have an intersectionObserver that watches some sections and highlights the corresponding navigation item. But I've only managed to get the "main sections Microsoft, Amazon working, but not the subsections Define, Branding, Design, Deduction. As…
umbriel
  • 723
  • 1
  • 7
  • 22
4
votes
1 answer

Background DIV fades in and out based on Intersection Observer

Currently, my background div text changes based on which element is on screen. Is there a way to make it so: the text fades out as the user scrolls then fades in and is at 100% when the div is in the center of screen then fades out as user scrolls…
amars
  • 407
  • 6
  • 15
4
votes
2 answers

Intersection Observer API not working with hidden elements

I am trying to observe a hidden element. I have an element which has style set to display: none. I want when my element intersect it will perform my action i.e: Play the video. I am sharing my sample code below var options = {threshold: 0.5 } …
Mufasil
  • 303
  • 1
  • 4
  • 16
4
votes
4 answers

In codepen, Intersection observer has different behavior from browser window

If I write this codes in separate HTML, CSS and Javascript files and open it with a browser, sticky sharebar appears when the target observed in middle of viewport height, but in codepen appears when the target observed in bottom of viewport height.…
Heyran.rs
  • 501
  • 1
  • 10
  • 20
4
votes
0 answers

How to lazy load react component on scroll(Virtual/Infinite scrolling)?

Usually in high traffic application like e-commerce need to ensure about page load size and TTI. Scenario, When user visiting the page, we just need to load all the components only in the viewport. if we render everything at the page load will cause…
Srigar
  • 1,648
  • 3
  • 14
  • 28
4
votes
0 answers

Intersection Observer Scrolling Problem On Mobile Devices

I'm having trouble with Intersection Observer in Gatsbyjs. There is a fixed header that needs to change the color when some section enters 90% of the viewport. I've created a component called IntersectionObserverComponent that renders a div with…
Andrija Pavlovic
  • 107
  • 2
  • 9
1 2 3
…
37 38