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
5
votes
2 answers

How to make IntersectionObserver work with transform translate animations?

I want to create an animation for an element with following properties: it animates the element when it enters the viewport if the element left the viewport and then enters it again it should be animated again depending on the scroll…
ysfaran
  • 5,189
  • 3
  • 21
  • 51
5
votes
1 answer

Problem with Intersection Observer in vue.js

It's my first time that i use IntersectionObserver and i followed this doc https://www.netguru.com/codestories/infinite-scroll-with-vue.js-and-intersection-observer . But I'm blocked because of this error [Vue warn]: Error in mounted hook:…
folipso
  • 107
  • 1
  • 8
5
votes
1 answer

Intersection Observer using querySelectorAll throws a TypeError

I'm getting stuck on a Intersection Observer problem. Using document.querySelectorAll('.entry') throws a TypeError: "Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'." Changing…
Sackadelic
  • 945
  • 1
  • 11
  • 21
5
votes
1 answer

intersectionObserver get ratio 1 if fully in view (larger than viewport)

I have a single page divided in multiple sections. Now on scroll I'm trying to show the progress (how much a section is in view), using the width of the bottom-border of the navigation items. Underneath you'll find an example of how I implemented…
Goowik
  • 782
  • 11
  • 36
5
votes
2 answers

How to Check if element is visible after scrolling for react-native? (tracking impressions and clicks)

How do I Check if element is visible after scrolling for react-native? saw some examples for react, but am looking specifically for react-native. Would like to track impressions and clicks
changey
  • 18,606
  • 9
  • 28
  • 34
5
votes
1 answer

Intersection Observer is not trustable?

I am changing the background color of a table cell when it is fully visible. To accomplish this task I have used an intersection observer. All the code is available on code sandbox with demo reproducing the bug: I am using useInView hook for the…
Vishal
  • 6,238
  • 10
  • 82
  • 158
5
votes
1 answer

IntersectionObserver: find out when element is outside viewport

Using the IntersectionObserver API, how can I find out when a particular element is outside of the viewport? As soon as the user scrolls past the header, and the header is therefore no longer inside the viewport, I need to output a console log. I…
Helenesh
  • 3,999
  • 2
  • 21
  • 36
5
votes
1 answer

intersection observer API and overflow hidden

I want to load lazily images when I can actually see images. So, I used intersection observer API. It seems to work fine But overflow : hidden doesn't seem to work with intersection API 'Not Working' means DOM in overflow: hidden seems to fire…
RayKim
  • 423
  • 1
  • 6
  • 22
5
votes
0 answers

IntersectionObserver position on element with height bigger than view

I'm looking for a way to show user in menu where he is on the page. Each menu item has anchor link to another element and IntersectionObserver which is setting background width for item and and if item is shown from bottom or top (left right on…
zajca
  • 2,288
  • 4
  • 30
  • 40
5
votes
1 answer

How to dynamically change Intersection Observer's configuration

I have a section on my page to which when user scrolls, an event fires. The solution uses IntersectionObserver which is perfect for my need. However, I would like to adapt the size of rootMargin of this observer, when the uses is already there. Now…
wiktus239
  • 1,404
  • 2
  • 13
  • 29
5
votes
1 answer

IntersectionObserver method not working - Javascript

I have a div that I want to change color when it scrolls into the viewport, and I'm trying to achieve this with the new intersectionObserver method. I've set my parameters in the config callback, but I can't seem to get the observer itself to add…
pjk_ok
  • 618
  • 7
  • 35
  • 90
5
votes
2 answers

Pass extra argument to IntersectionObserver?

How would I pass an extra argument to the IntersectionObserver? I am trying to create a lazyload plugin for Vue. It works fine like this but I also want to be able to call a provided directive function. const lazyload = { install(Vue) { …
Stephan-v
  • 19,255
  • 31
  • 115
  • 201
5
votes
1 answer

IntersectionObserver on IE, Edge

IntersectionObserver is fairly new, experimental API, and at this moment is not fully supported by all browsers. It will have many uses, but for now the most prominent one is lazy-loading your images, that is if you have them plenty on your website.…
5
votes
1 answer

MS Edge: IntersectionObserver. Does it work for you?

Before anyone goes to too much effort here, I already have a nasty workaround. I just want to know if anyone has it working. Version 15 of Edge is now released and has support for intersection observer (for lazy loading). I've implemented it and it…
Peter D
  • 53
  • 1
  • 4
4
votes
2 answers

Why intersection observer handler is not fired when using scrollTo or scrollIntoView?

An intersection observer is set up on an element. When the element is scrolled past a certain point, the intersection observer handler is fired as expected. However, if a button is clicked to scroll the element past that same point, the handler is…
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746