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

GSAP and IntersectionObserver: Text .from opacity:0 to 1 flashing before animation

I am using GSAP and IntersectionObserver to animate every character of every h1 on scroll. Everything seems to be working but the opacity part of the animation doesn't work as expected. Basically one can see the h1 before it goes to opacity:0 and…
Vito
  • 179
  • 1
  • 14
0
votes
1 answer

Change style of header on scroll using IntersectionObserver in react

The following code using IntersectionObserver in simple Html & JavaScript works fine to change the header styling depending on the visibility of a section just below the header. Reference observer.js const header =…
Ankush Chauhan
  • 1,433
  • 2
  • 17
  • 22
0
votes
1 answer

Problem while trying to scroll window to an element position using intersectionObserver

I'm trying to make slide-show website using intersectionObserver. Basically, i grep elements and listen for intersection event, then i want to set window.srollTo to element's offsetTop. I have tried window.scrollTo(0, 10), elem.scrollIntoView(),…
Maksym Antoshkin
  • 17
  • 1
0
votes
1 answer

Play/Pause video with sound on intersection - Chrome - DOMException: play() failed because the user didn't interact with the document first

I want to play the video once the users viewport intersects with the video or pause it once video gets out of the view. I managed to do it on Firefox, but it seems like Chrome has some issues. What I get is the error in the console: Uncaught (in…
dodo254
  • 519
  • 2
  • 7
  • 16
0
votes
1 answer

IntersectionObserver and ajax loaded content

I am working on website at the moment, that has some native lazy loading of images using IntersectionObserver the images that I am trying to load are loaded in via ajax as a result I don't think they are "loaded" into DOM on page load, and therefore…
Udders
  • 6,914
  • 24
  • 102
  • 194
0
votes
1 answer

Intersection observer "unloads" images after looping on carousel (Siema)

I have this fiddle to show my problem. I have made an intersection observer for lazy loading images, code: const images = document.querySelectorAll("[data-src]"); function preloadImage(img){ const src = img.getAttribute("data-src"); if…
Athene Noctua
  • 25
  • 3
0
votes
1 answer

React.js - State doesn't update when function is called in componentDidMount()

I'm having an issue with changing the state of a label in a tab when I do scroll on the page. I don't know if componentDidMount() is responsible for it, but I've tried a lot of things and I just can't reach the solution. Here is the demo…
Pedro Relvas
  • 678
  • 7
  • 19
0
votes
1 answer

Intersection Observer loses entries

I am trying to use IntersectionObserver in my react app. I want to achieve lazy loading with it. Therefore I observe several elements and if they appear on screen I load content inside them. Here is a very simplified code: class Table extends…
Joozty
  • 460
  • 2
  • 12
  • 40
0
votes
0 answers

IntersectionObserver Lazy Loading not Working

This is my first time attempting Lazy Loading, and I wanted to use IntersectionObserver. Got started by following along with this website. I honestly just want the content of the page to wait to load until it is less than 50% of the viewport's width…
user12494004
0
votes
2 answers

Remove keyboard focus from a form element after it goes out of viewport

How can I use the relatively new Intersection Observer API to detect when input that’s currently focused goes outside the viewport, so that when it does, the focus on that input is removed? The solution should work in Safari for iOS. Here is my…
Tzar
  • 5,132
  • 4
  • 23
  • 57
0
votes
2 answers

Is there any way to change a div size on scroll using intersectionObserver?

I'm trying to change the size (or scale) of a div while scrolling. This div has a .8 scale attached to it css. I'd like to reach a scale of 1 progressively while scrolling. IntersectionObserver seems to be a good choice to work with instead of…
Biscuite
  • 85
  • 9
0
votes
3 answers

Intersection Obserser freezes IE11 in angular 7 application

I created an angular 7 application and used Intersection Observer to lazy load some items. It working like a breeze in Chrome, Mozilla and even Edge. But in IE11, when the lazy loading starts and intersection observer starts , the application…
Ram
  • 451
  • 10
  • 18
0
votes
1 answer

CSS | Position sticky not working on IE11

I want to add a specific class to the element when it's sticky position condition matches. I am using Intersection Observation API to check when the element gets it's sticky position. Code is working fine in all Browsers except for IE11. I have…
Bhupendra
  • 1,196
  • 16
  • 39
0
votes
1 answer

Bugs when applying intersection observer in VueJs

I want to render my image only when the user has seen it or when the image element is visible within the user viewport. I already tried it, but the image is only rendered when I already passed all the image element, not one by one when i scroll. I…
cantdocpp
  • 350
  • 7
  • 18
0
votes
1 answer

toggle a burger menu background based on which section is overlapping

I am trying to change the burger menu on my website everytime it sits on top of a section with a light background for visibility. I tried to use intersection observer, and the solution seems working, however it triggers too early on scroll, before…
marcantonio
  • 3
  • 3
1 2 3
…
37 38