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

How can I make me Intersection Observer only put the div on the screen once and not remove it when the user scrolls away?

I'm lazyloading an ad into my website, and I can get it to show up only when the user scrolls down far enough, but when the user scrolls back up, the div disappears. I want it so that when the user sees the div for the first time, the ads come and…
AviG
  • 362
  • 2
  • 14
0
votes
3 answers

Intersection Observer find out element is shown or hidden

Intersection Observer callback function is invoked whenever observed element is shown or hidden (when threshold point is reached).. So can I get wether element is about to disappear or it's about to show up?
O. Shekriladze
  • 1,346
  • 1
  • 19
  • 36
0
votes
1 answer

How to lazy load html div tags using intersection-observer?

Is it possible to lazy-load the entire div-tag using Intersection Observer API? I have lazy loaded images using the intersection observer api approach. Not sure how to do it for html elements.
kaushambi gujral
  • 33
  • 6
0
votes
0 answers

two separate observe() functions watching two different elements don't watch them

I can't think of a better title but this is the situation: I want to watch two different elements in an intersection observer. On page has one element My code at first looked like below: // page 1 element to watch const titleEl =…
kawnah
  • 3,204
  • 8
  • 53
  • 103
0
votes
1 answer

How can I get the Intersection Observer callback trigger at every pixel when the element is intersecting?

I am using the Intersection Observer API to help me with a parallax effect. So far everything work well except for one scenario: When the image is already visible and in the middle of the page, as long as the image it not intersecting with the edge…
user3415011
  • 195
  • 1
  • 2
  • 11
0
votes
1 answer

Intersection Observer don't work with jQuery UI dialog

This is related to Intersection observer does not work with target with position: fixed but my issue is that interection observer don't fire on element with position: absolute. I have jQuery UI dialog and when it show up observer don't fire. Here is…
jcubic
  • 61,973
  • 54
  • 229
  • 402
0
votes
2 answers

Intersection Observer - cannot assign to rvalue that is not a reference

I'm trying to set up an intersection observer that looks for elements on my page that have a data-original-bg and assigns that as the background image url style, so the images are postloaded. I've written a function in my React component and loaded…
user2953989
  • 2,791
  • 10
  • 36
  • 49
0
votes
0 answers

Javascript intersection observer on fixed element

I have a fixed footer that expands when the scroll event is triggered and shrink after 1500ms of the last scroll or move. Below is a simplified version of the production script where I'm using lodash throttle and remove event listener when…
user443917
0
votes
1 answer

Callback for intersection observer being called for images that are not intersecting

I have some images with a fixed height I want to lazyload. These images are wrapped in a component, which provide an intersection observer. In the main page, I use a few of these components. However, although I have 6 of…
OctaviaLo
  • 1,268
  • 2
  • 21
  • 46
0
votes
1 answer

Trying to fade in images as they load below the folder

I'm using IntersectionObserver to replace an initially-loaded image with another one as the original image comes into the user's viewport. I want the image to fade in, as opposed to just straight replacement. I've tried adding a Jquery loader to the…
Daniel Williams
  • 2,195
  • 7
  • 32
  • 53
0
votes
1 answer

Best way to use svg animating library vivus with intersection observer

I use vivus.js to animate SVGs. I wonder what is the best way to use it in combination with intersection observer, concerning performance. On my page are several sections, including inline svgs. These svgs should be animated when scrolling down the…
user4867900
0
votes
1 answer

JavaScript detect intersection/collision with any other unknown element

I've been looking at IntersectionObserver for detecting when en element is visible to the user by checking if it is inside the viewport. However, if another element covers the "target" element, it appears we can only detect this if we know which…
tripRev
  • 830
  • 3
  • 12
  • 27
0
votes
0 answers

LazyLoad Image/Picture with Promises

How can I use Promises to load Images from IMG-srcset or from Picture-sources? As far as I know, Browser decides which url (size) should be loaded. How can I make this without setting the complete srcset/sources at once - which makes Promises…
user966660
  • 634
  • 1
  • 8
  • 20
0
votes
1 answer

Lazy loading img's with IntersectionObserver polyfill fails in Internet Explorer

I'm attempting to implement lazy loading of images using IntersectionObserver where available, and by using a polyfill otherwise (as recommended here). +function ($, window, document, undefined) { var lazyImages =…
hcs
  • 321
  • 3
  • 14
0
votes
1 answer

IntersectionObserver not always firing in angularjs directive

I am currently trying to implement lazy loading using the IntersectionObserver in my angularjs app. But when I scroll up and down it doesn't always call the callback function of the observer. My directive looks like this: var app =…
Dominik G
  • 1,459
  • 3
  • 17
  • 37
1 2 3
…
37
38