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

IntersectionObserver is not defined error on server side. Intersection Observer with angular universal(Server side rendering)

I have an angular Universal application(server-side rendering). I am using IntersectionObserver for lazy loading images and it is working fine. Although it is giving me this error on server-side logs (pm2 server-error.log). ERROR ReferenceError:…
Ayush Chaurasia
  • 345
  • 4
  • 9
4
votes
1 answer

Does IntersectionObserver support horizontal scrolling observation?

I made a couple of vertical scroll IntersectionObserver modules, but I'm interested in horizontal scroll (root will be a div and observation target will be an img). I want to observe the changes when the img becomes enlarged but the div remains the…
Ted Fitzpatrick
  • 910
  • 1
  • 8
  • 18
4
votes
5 answers

Why index of forEach is always 0 in array returned by IntersectionObserver?

I am using the IntersectionObserver API. When a specific section is entered, background-color is changed. To handle this, I have to obtain the index of an entered entry in the array of IntersectionObserverEntry called entries here. I used…
undefined
  • 978
  • 1
  • 12
  • 30
4
votes
1 answer

intersectionObserver callback called outside threshold

Trying to understand a quirk in intersectionObserver API. If an observed element is partially on screen but has not met the threshold defined in the options I would expect the call back not to fire, but it does. Trying to understand why or how to…
user2433573
3
votes
0 answers

How to change the linear gradient of a html element as it slowly goes out of viewport in react?

I have a react component where I am trying to implement a fading css effect as the user scrolls through a list of components. The component code is here below: function TypeContainer(props: Props) { const ref = useRef
Zahin
  • 307
  • 3
  • 12
3
votes
1 answer

How to Properly Destroy an Intersection Observer?

I am currently wrapping the IntersectionObserver API into a Svelte action. Part of this requires cleanup in a destroy() function, below is what I have. function observe(node: HTMLElement, key: string) { const observer = new…
kalkronline
  • 459
  • 2
  • 12
3
votes
1 answer

State management issue within intersectionObserver's callback function

I am trying to manage the index of the current page with state while implementing infinity scroll. const [pageIndex, setPageIndex = useState(2); const getList = useCallback(async () => { try{ // request api const {data} = await…
Hyeongrok
  • 31
  • 1
  • 5
3
votes
1 answer

Why does a react component, tested with React Testing Library has issue with react-intersection-observer?

I wrote a component built with react 17.0.2 that uses react-intersection-observer 9.1.0 import { useInView } from 'react-intersection-observer' ... const [ref, inView] = useInView({ threshold: 0.99, root: scrollRef.current, …
axel
  • 3,778
  • 4
  • 45
  • 72
3
votes
1 answer

In Vuejs3 how to make the sticky header component change background colour when intersecting with other components?

I am just wondering, how to structure my code to make my sticky
component change its background-color when intersecting with other components (in this case with and
. To make things more complicated, I use…
Dariusz Legizynski
  • 362
  • 5
  • 22
3
votes
2 answers

redux state doesn't have updated value in InterSectionObserver callback function

I am using IntersectionObserver api for implementing infinite scroll. When callback is called ,then inside the callback,redux state does not have updated value.The functions are: //function for defining InfiniteScroll const InfiniteScroll =…
Kanhaiya
  • 359
  • 2
  • 11
3
votes
3 answers

IntersectionObserverAPI Return to default state when none of the elements are visible

I'm using a React Hook to detect when an element is visible in the viewport. Until then, everything works fine but I need to 'reset' the state when everything is hidden (like reaching the footer or the header). Here's my hook: import { useState,…
user990463
  • 439
  • 1
  • 7
  • 27
3
votes
1 answer

IntersectionObserver triggers before element enters view

Using Vue, I have the following setup in a component: