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

Test IntersectionObserver in an Angular component

I'm using an IntersectionObserver to load data when user scroll to the bottom of the page. @Output() onScroll = new EventEmitter(); @ViewChild('end') endOfList!: ElementRef; observer!: IntersectionObserver; constructor(private…
JoH
  • 514
  • 1
  • 6
  • 16
0
votes
1 answer

Intersection Observer API for infinite scrolling

I am doing a twitch web app. I try to use the Intersection observer API to achieve infinite scrolling and it works. However, I notice that my navbar just disappears at all when the infinite scrolling is working. I guess the issue is caused by…
Oscar
  • 125
  • 1
  • 9
0
votes
1 answer

Targetting a target in Intersection observer API

I am still trying to make friends with Javascript so am i with the Intersection Observer API. I have three target elements that am monitoring their visibility in the device's viewport: let $target_1 = section1.querySelector('.about-me'); let…
hane Smitter
  • 516
  • 3
  • 11
0
votes
0 answers

Problem with manipulating data object inside IntersectionObserver

I was trying to add a class to Header after some scrolling so I added an IntersectionObserver to Header component: export default { data() { return { test: false } }, mounted () { const observer = new…
Oskar Nawara
  • 49
  • 9
0
votes
1 answer

Intersection Observer with lazy loading

i want to achieve this behaviour from this example with images https://codepen.io/ryanfinni/pen/jONBEdX. the only difference it's that instead on toggling the img visibility, for every div that it's in view, i want to make an call to an endpoint to…
coder
  • 99
  • 11
0
votes
1 answer

React Infinite Scroll - Intersection Observer API always jumping back to top

I´m developing a React application with infinite scrolling using the Intersection Observer API (not using any 3rd library for infinite scrolling). My backend handles pagination properly, and the infinite scrolling also fetches the next parts when…
stefano
  • 315
  • 2
  • 16
0
votes
2 answers

How to reference dynamically created intersection observers in a JS library

I'm trying to build a micro JS library to emulate InDesign text threading on the web using this constructor pattern boilerplate. The idea is the user feeds the function DOM selectors in a desired order, e.g. var thread=new…
Nico
  • 129
  • 11
0
votes
1 answer

Javascript TypeError: Type error when using IntersectionObserver() only in Safari

I can't figure out why Safari (13.0.2) is throwing a TypeError: Type error when using IntersectionObserver(). The other major browsers don't. document.addEventListener("DOMContentLoaded", () => { const lazyImages =…
user1431398
0
votes
1 answer

is there an entry.target.Classname in intersection observer?

I am trying to conditionally trigger animations via intersection observer. I have used document.queryselector.all to call items of a certain class, and then another document.queryselector.all to call items of a different class. I have two different…
Prateek Pandey
  • 23
  • 4
0
votes
1 answer

useCallback and IntersectionObserver's callback still gets the old value of a Redux state before getting the new value

In my app, for every intersection, fetch 10 messages with timestamps that are less/earlier than the date request, then unshift them into messages array. The value of the date request is the timestamp of the first item in messages state. Here's the…
jstarnate
  • 319
  • 3
  • 15
0
votes
1 answer

I have problem with Intersection Observer API

I need to add .your-active-class to all the sections to be able to change the color of the element in the viewport, it works on the first 2 elements and ignore the third if i scroll up it work with the second section only and stop work can some one…
mahmoud hegazi
  • 3
  • 2
0
votes
0 answers

Intersection Observation continues when intersectionRatio is 1

Want to get some perspective on the Intersection Observer API. For simplicity, I have a div element (Square 500px x 500px) that will rotate based on the user's scroll position. This is obtained by entry.boundingClientRect.top. However, once the…
jackstride
  • 53
  • 8
0
votes
2 answers

Problem with intersection oberserver api / useEffect hook triggering callback twice

I'm not exactly certain why but something i've done is causing the callback in my intersectionObserver instance to fire 2 times when it should only fire 1 time. any insights as to why that might be would be greatly appreciated. amongst other things…
Mark Funkhouser
  • 43
  • 1
  • 10
0
votes
1 answer

Do Intersection Observer Animation and Hover effects not work together?

I'm working on a project that is using Intersection Observer to add animation to an element's style upon entry. However, what I'm noticing is that the : hover attribute no longer works when I apply the style. Am I doing this wrong, or, are these two…
Sackadelic
  • 945
  • 1
  • 11
  • 21
0
votes
0 answers

Play multiple visible video elements

I found an interesting tutorial on how to use IntersectionObserver to play/pause videos as the are scrolled into view, however I couldn't get it to work on a page with multiple videos. I then found this post: HTML5 and Javascript to play videos only…
user11730319
1 2 3
…
37 38