Questions tagged [intersection-observer]
Javascript IntersectionObserver is an API for finding intersections of DOM elements.
455
questions
2
votes
1
answer
37
views
<img> - loading='lazy' vs Intersection Observer? [closed]
I'm building a React app which is very image heavy, all from API calls. I've got loading='lazy' on all of them but it got me wondering if more can be done? I know you can achieve a similar result ...
0
votes
0
answers
10
views
Anchor link to jump accurate position when images are not loaded yet
I use Intersection-Observer API and framer motion for contents to be appeared when in view.
The animations work fine, but the in-page anchor links now don't jump to the accurate position since images ...
1
vote
0
answers
41
views
Anchor links jump to accurate position after images are loaded
Similar to this post, my case doesn't use React Router or jQuery. It's just a single page and vertically long.
As for the title, anchor links don't jump to the accurate position since the images are ...
0
votes
0
answers
18
views
IntersectionObserver does not intercept elements with display contents
It looks like IntersectionObserver never considers elements with display: contents in the viewport.
This behaviour makes sense for display: none but I find it counter-intuitive for display: contents.
...
0
votes
0
answers
11
views
Using Intersection Observer to Lazy Load Images in <picture>
I am trying to lazy load images in the <picture> tag by using the intersection observer. I tried an implementation and it seems to be only partially working and the problem is that only the ...
0
votes
0
answers
19
views
Detecting % of intersection in JavaScript (even in case of reflow)
I'm trying to add a scrolling animation, where an object's Y transform is based on how scrolled over the object I am. When it scrolls into view it'll start sliding up, and be fully slid up when it's ~...
0
votes
0
answers
12
views
Targeting the nearest intersection to the root when multiple items are intersecting
I have a list of sections inside of a container (root), each one observed by the same Intersection Observer.
When clicking an anchor on the left-nav (red), it scrolls to that section and the ...
0
votes
0
answers
7
views
How can implement lazyloading/infinite scrolling effect for a similar component in React
I have a component which is rendered more than 1 time, I want to lazy load that component from the point it is out of viewport, which I think should be handled by intersection observer. Please help me ...
0
votes
1
answer
85
views
How to reproduce the 4 callbacks of gsap's ScrollTrigger with IntersectionObserver?
I would like to implement the 4 callbacks of gsap's ScrollTrigger: onEnter, onEnterBack, onLeave, and onLeaveBack, with IntersectionObserver.
https://greensock.com/docs/v3/Plugins/ScrollTrigger
(...
0
votes
1
answer
41
views
Intersection Observer fails to update state
I am trying to create infinite scrolling with intersection observer, but callback function fails to update state. When i scroll down i can see states's console.log output but its always same.
import ...
0
votes
0
answers
26
views
Are intersectionRatio and threshold referring to the same value or am I mistaken?
In the intersection observer API. The intersection ratio and threshold similar or not?
i.e. if I console.log the the intersectionRatio will won't I get the threshold value?
0
votes
1
answer
22
views
Bugged CSS animation in Firefox using Intersection Observer
I'm using Intersection Observer to add a class to specific elements as they enter the viewport. The class triggers a CSS animation.
Specifically, I'm adding .swipe to any .highlight elements that ...
1
vote
1
answer
33
views
IntersectionObserver always showing as "in view" when its not
I'm trying to get IntersectionObserver working for my page. The HTML looks like:
<div id="feature-blocks">
<div class="block left">
<img src="/2022/...
1
vote
0
answers
15
views
Is there a way to use dispatch inside of an Intersection Observer callback function?
I have an intersection observer that registers a list of elements as they are rendered. I would like to dispatch an action for a certain threshold, which means I would need to dispatch an action ...
1
vote
0
answers
72
views
React infinite scroll doesn't work after first render
I am trying to implement "infinite scroll" in my react app in which I fetch all data at once and as user scrolls down the page it displays more and more data. For that I use Intersection ...
0
votes
0
answers
6
views
how to make unmuted the video when playing automatically when it's come to viewport?
how to unmute video using an observer?
if I remove "true" in this code "$(this).prop("muted", true);" the video won't play automatically and if I don't remove it the ...
0
votes
0
answers
50
views
Infinite scroll using IntersectionObserver in React
I made infinite scroll using IntersectionObserver.
Here is the link.
https://codesandbox.io/s/brave-fog-qy1f7j?file=/src/App.tsx
I want to add arr.length !== 0 to line 43 like this.
if (now.current !==...
1
vote
1
answer
33
views
Setting video on pause when invisible
My question is based on this one:
Event listener for when element becomes visible?
I want a video element to start playing automatically when became visible and to stop when became invisible. The ...
0
votes
0
answers
18
views
Issues with react-virtualized
I am using react-virtualized to create an infinite scroll in my React app. Because list items can be of different heights, I am using CellMeasurer from react-virtualized to render list items. I also ...
0
votes
0
answers
20
views
Why does IntersectionObserver v2 not report expected isVisible result cross domain
My understanding is that IntersectionObserver v2 in Chrome should report whether an iframe is truly visible and nothing is covering it. So I created a simple test case:
main.html
<!doctype html&...
1
vote
1
answer
172
views
SolidJS: Updating signal from within IntersectionObserver Callback
The following is a code snippet from a solid.js application. I am attempting to update the state of a top-level signal from within an IntersectionObserver's callback. The state is being updated within ...
0
votes
0
answers
26
views
Please tell me what is the meaning of the Boolean this expression returning? ( entry.target.classlist.toggle.valueof )
I want to trigger an if statement when the intersectionObserver API toggles a class in the DOM Element.
I am just not sure what exactly is the boolean value returned by this expression: -
entry....
0
votes
1
answer
31
views
IntersectionObserver not registering on iOS, but works on Android, in Nuxt
What I have
I have made use of IntersectionObserver on my feed page. It behaves like TikTok. Scroll up or down to see the next video. On enter the video plays. On exit, it stops playing.
The Problem
...
0
votes
0
answers
14
views
How can we specify the time upto which an element should remain on viewport in Intersection Observer
I am using Intersection Observer API in react to detect an element coming on viewport. But I also want that the element should remain on viewport for minimum 3 seconds and detected after that. How can ...
0
votes
2
answers
27
views
How to apply CSS styles based on existence of Browser API feature?
I have a page which has the content invisible (opacity = 0) and based on the isIntersecting property as the user scrolls down the opacity changes to 1. It's pretty simple and a basic implementation of ...
0
votes
0
answers
32
views
react ifinit scroll with Intersection Observer
I'm currently making infinite scrolling with react and intersectionobserver api.
The div is at the end of the list, and if you look at the entries, the isIntersecting value comes out as true.
Why is ...
1
vote
1
answer
114
views
Why does a react component, tested with React Testing Library has issue with react-intersection-observer?
I wrote a component built with react 17.0.2 that uses react-intersection-observer 9.1.0
import { useInView } from 'react-intersection-observer'
...
const [ref, inView] = useInView({
...
2
votes
1
answer
108
views
Using intersectionObserver instead of onscroll event
my-div element has position absolute. When you scroll the page, as soon as my-div is out of the view port its position changes to fixed and top: 0. Here I need to change the value 0 for top to 100px.
...
0
votes
2
answers
46
views
Can I trigger an animation when an element reaches half way in the viewport?
(JavaScript)
I can see that it is possible to trigger an animation using an IntersectionObserver when an element enters and leaves the viewport - but is there a way to trigger an animation when an ...
0
votes
0
answers
51
views
How to apply Infinite Scroll with react-intersection-observer
I'm using react-intersection-observer npm package for my CRA project.
I want to achieve this Infinite Scroll effect whenever users reach the bottom of the page or click on the Load More button -> ...
0
votes
0
answers
38
views
Simple Intersection Observer API going in infinite rendering loop
I have this simple observer which add and removes classes based on entry.isIntersecting.
Everything works fine except when view port is resized to particular size (this size is related to threshold) ...
0
votes
1
answer
232
views
react-intersection-observer only works with the last elements
I'm trying to build the Lazy Loading feature with react-intersection-observer, the goal is to only load the images in the boxes if they're in the viewport.
Currently, when I scroll to the last ...
0
votes
0
answers
165
views
targeting multiple elements with intersection observer API
I have an Intersection Observer working for an element on the page, however I want to now apply a completely different animation to another element on the page. I tried creating multiple observers, ...
0
votes
2
answers
139
views
CSS Animations laggy or jumpy when using Intersection Observer API
in my HTML/CSS web project I wanted to include a CSS-based animation using @keyframes, which worked like a charm.
Then I tried adding a possibility to only load the animations when they are visible to ...
0
votes
1
answer
70
views
How to use IntersectionObserver inside class? [duplicate]
Encountered a problem with using IntersectionObserver inside a class. For example, I am creating from my class constructor observer instance and create a callback - function in the current class. When ...
0
votes
0
answers
23
views
Intersection Observer for handling active state in navigation : problem with sections that are not tall enough
Working on my personal website, I am trying to implement the Intersection Observer API for navigation items active state management, such as the example we see here : http://intersection-scrollspy....
0
votes
0
answers
36
views
Understanding scope for variables in IntersectionObserver
My variables:
const el = useRef(); // ref getting attached to container element
const searchData = useSelector(selectSearchData); // selects data from Redux, ...
3
votes
1
answer
179
views
In Vuejs3 how to make the sticky header component change background colour when intersecting with other components?
I am just wondering, how to structure my code to make my sticky <Header /> component change its background-color when intersecting with other components (in this case with <Hero /> and <...
0
votes
0
answers
43
views
creating custom hook with IntersectionObserver API in React
I'm using some boilerplate code for utilizing the intersectionObserver in React.
Which works well and how I would expect.
const containerRef = useRef(null)
const [isVisible, setIsVisible] = ...
0
votes
1
answer
120
views
Async function in for loop
I'm trying to lazy load maps in the page. As the map element intersects, I load the script an run the appendMap() function. If two maps are in the viewport, the loadScript function test for map-scipt ...
1
vote
0
answers
53
views
How to apply IntersectionObserver to v-for directive in Composition API?
I can use an IntersectionObserver to lazy-load images like so:
<template>
<div id="gallery" class="gallery">
<div class="gallery-card">
<...
1
vote
1
answer
137
views
Change nav-link style depending on which div is in viewport in React
I have a SPA with a long height page, where one section represents one page.
Actual code:
const ScrollWrapper = () => {
return (
<div className={styles.ScrollWrapper + ` ` + 'snap-container'}...
0
votes
0
answers
39
views
how to replace items when using intersection observer
Pretty new to code so forgive me if I stumble around some wording here, but I'm trying to use IntersectObserver to show a specific image when its corresponding text is shown in a scroll menu. Right ...
0
votes
0
answers
90
views
How to play single video(just like youtube) using IntersectionObserver when multiple videos are on page
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@...
0
votes
0
answers
47
views
Setting last element of gird with react-intersection-observer with rows and grid from Grid component
I am trying to use react-intersection-observer with my Grid Component. I am trying to get last item of my grid and whe it is in view load additional data to my grid.
GridComponent.js is a class ...
0
votes
0
answers
32
views
intersectionobserver not loading images appended to the DOM later on
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in ...
0
votes
0
answers
32
views
Javascript removeEventListener not working on the window object
I'm trying to create the parallax effect using the intersectionObserver API. I want the event listener to be removed from the window object when the block1 section is not intersecting. but it is not ...
0
votes
0
answers
182
views
ReactJS Intersection Observer only working once if I change something in App.tsx... if I refresh the browser, it will not work work anymore
I am facing an issue where the intersection observer only working once I have changed something in App.tsx and saved it via "ctrl+s"
App.tsx:
import React, {
lazy,
RefObject,...
0
votes
1
answer
98
views
Simple Scrollspy without Bootstrap on custom Nav Component
I have a Table of Contents with id #TableOfContents in which each href points to a h2 or h3.
The problem I am having is that once the Heading, h2 or h3 is observed by intersection observer, Entry for ...
1
vote
1
answer
74
views
intersection observer works only for the first video
I need to pause a video if it is not in view
the below code works only for the first video in list
how to make it working for all .bvideo ?
<video class='bvideo' src='a.mp4' poster='a.jpg' preload='...