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
0 answers

get next data-id selector js from current data-id element

I have html that looks something like the below. dataId below is the data-id that has just been scrolled over. At this point I want to get the closes data-id to this element. I have taken many approaches, unfortunately none of which are…
peter flanagan
  • 9,195
  • 26
  • 73
  • 127
0
votes
1 answer

Select Multiple Elements with Query Selector Alll - JavaScript

I have an intersectionObserver on a box that changes color when it comes into the viewport which all works fine. I'm trying to apply this to multiple boxes though, and when I change the the getElementsById to querySelectorAll (line 13 of the JS) it…
pjk_ok
  • 618
  • 7
  • 35
  • 90
0
votes
1 answer

IntersectionObserver and images with unknown height

I have a page with many square images (same width and height) where size is controlled with width:50%. They will be lazy loaded with lozad.js (https://www.npmjs.com/package/lozad) that uses IntersectionObserver. The problem is that…
Stig
  • 1,974
  • 2
  • 23
  • 50
-1
votes
0 answers

( TypeError: Cannot read properties of undefined (reading 'positionAbsolute') at nodeToRect ) while using getIntersectingNode

I'm using reactflow to make flowchart. While using the function getIntersectionNodes, the typeerror is shown that it cannot read properties of undefined. However, It worked well when I tested the same code in my demo version. Does anyone have idea…
sieun
  • 39
  • 3
-1
votes
1 answer

calling a function inside an intersectionObserver

i just want to call this code as a function inside an IntersectionObserver: And i want it to be reusable and cleaner, so i could just it anywhere //I want this to be a function numbers.forEach((number, index) => { intervals[index] =…
newbcods
  • 9
  • 4
-1
votes
2 answers

Intersection Observer React Why is my code not working?

I want to make an "Intersection Observer" for my project that I created with React. From what I've researched on the internet, I think I followed all the instructions correctly. But my code doesn't work, I don't understand where is the error. Can…
Sr. Developer
  • 1
  • 2
-1
votes
1 answer

Why is function argument is 'transformed' into an array

I cannot understand why first argument of the callback for the Intersection Observer is 'transformed' into an array. (function () { var observer = new IntersectionObserver(function (entries) { // entries is an array …
jack
  • 1,391
  • 6
  • 21
-1
votes
2 answers

How to make automatic navbar based on section of a webpage?

I come across two cases where the navigation bar items are selected automatically when I scroll to certain section. How do I achieve that? I'm looking for a solution which is up to date of 2018 and as simple as possible(vanilla JS or without extra…
ycshao
  • 1,768
  • 4
  • 18
  • 32
-2
votes
1 answer

IntersectionObserver showing infinite entries

I am currently working on a portfolio website project using HTML, CSS, PHP and JavaScript. I have almost completed it. There is one issue I am facing and having hard time fixing it. So I have made sticky navigation bar using IntersectionObserver.…
Lovish
  • 7
  • 5
-2
votes
1 answer

Intersection observer in Angular 7/Typescript

I am trying to follow various tutorials on the IntersectionObserver API, such as this one. Adding the sample code into my component's TS file: const myImg = document.querySelector('.animate-me'); observer = new IntersectionObserver((entry,…
Steve
  • 14,401
  • 35
  • 125
  • 230
1 2 3
…
37
38