590 questions
-1
votes
0
answers
51
views
carousel to show text pages using css and Intersection Observer to lazy load pages on demand in react js
I made a carousel to show text pages using css and Intersection Observer to lazy load pages on demand in react js.
I initialized the state with the first 3 pages.
My Goal:
when i scroll right next ...
2
votes
2
answers
103
views
Optimize Hook Render Times
This is the hook I use to activate the navbar item when its section is visible in the screen, for example: section with id "#howtoorder" is in the visible part of the screen, then the navbar ...
- 23
1
vote
1
answer
216
views
IntersectionObserver callback repeatedly triggered when using sticky elements with dynamic height adjustments
const {
useEffect,
useRef,
useState
} = React;
const HEADER_HEIGHT = 64;
const BREADCRUMBS_HEIGHT = 61;
const OFFSET = 0;
function App() {
const stickyRef = useRef(null);
const [isStuck, ...
0
votes
0
answers
39
views
intersection observer creating infinite animation loop
I'm using an intersection observer in a header nav bar that when scrolled past is affixed to the top of the viewport to provide site navigation to the user at any Y scroll point. There is a CSS ...
- 672
0
votes
1
answer
133
views
Intersection Observer for two elements
I started off with a situation where I wanted to observe an element on my page, let's call it "trigger". It is usually always visible upon page load (above the fold).
As we scroll down, if &...
- 12.1k
0
votes
0
answers
70
views
Inputs inside modal don’t focus unless I scroll
I'm building an Airbnb-style React app. The header starts as an expanded version and shrinks once the user scrolls. To detect scroll, I placed a 1px invisible div at the top of the page and observe it ...
- 1
0
votes
0
answers
139
views
Animation on Scroll - Intersection Observer Javascript not working in WordPress?
I'm trying to get animate.css to fire up a CSS animation when the CSS selector comes into view when scrolling down a page.
The animations work fine at the top of the page - so that bit works okay. It'...
- 95
0
votes
0
answers
140
views
How can I create a horizontal two-directional infinite scroll gallery with manual scrolling? (svelte)
I'm trying to build a horizontal gallery of images, that the user can manually scroll in both directions, and will show the same images over and over infinitely.
I'm using Svelte as my frontend ...
0
votes
0
answers
84
views
Intersection observer aggressively batching entries in safari IOS
In the following (pretty basic) implementation of intersection observer, I'm noticing that IOS safari is batching the entries very aggressively in a single callback: if I scroll through the six items ...
- 157
1
vote
1
answer
89
views
Add class when intersection observer passes the element scrolling down, and remove when up?
I'm trying to toggle the class when Intersection Observer passes a certain element.
When it passes from the top, I'd like to add class and then to remove it when scroll direction is up.
It works, but ...
- 755
0
votes
0
answers
64
views
IntersectionObserver rootMargin is ignored on mobile device
I'm using the IntersectionObserver API to load additional content when the page scrolls close to 1000px from the bottom. It works fine on desktop, but on mobile screens, the content only loads when it ...
- 13
1
vote
1
answer
434
views
IntersectionObserver causes flickering when the element is only partially in view
I'm working on an Angular 18 project where I want to animate a button when it comes into view using the IntersectionObserver API and it works.
However, if only half of the top button is in view, it ...
- 891
1
vote
1
answer
282
views
Laggy/Glitchy CSS Animations only on Firefox with Intersection Observer
I'm utilizing Intersection Observer API to hide the website header logo when it's not over (or close to being over) a background image.
Works well on Google Chrome, other chromium browsers and Safari (...
- 13
0
votes
0
answers
34
views
Cannot get intersection observor to identify when elements intersect in a tailwind project
Ive tried numerous ways but I cannot seem to get the intersection observor to identify and console log when entries are appearing in the screen. Please help.
<div class="element relative w-...
- 1
0
votes
1
answer
428
views
Angular Infinite Scroll with sorted list results in endless loop
Description
I'm working on an Angular project. I implemented an "infinite scroll" list utilizing IntersectionObvserver. Generally it works quite well and satisfying.
The entries to build the ...
- 1,879
1
vote
1
answer
71
views
detect when horizontally animating element reaches center of viewport
Given an animating (transforming) row of images, detect when each one reaches the center so we can make some changes (e.g., adding styling like filter: grayscale)
I've enlisted IntersectionObserver ...
- 408
0
votes
2
answers
575
views
react photo album infinite scroll
I'm trying to implement infinite scroll on react photo album component,
I'm trying to use this library :
https://react-photo-album.com
i can detect when the user scrolled down and fetch more photos (...
- 83
0
votes
1
answer
126
views
Detecting if there an element or iframe overlaid on top of my iframe to prevent clickjacking
Detecting if there an element or iframe overlaid on top of my iframe
I have an iframe that can be embedded inside any website based on the content security policy.
Is there a way for the my iframe ...
- 1,214
0
votes
1
answer
251
views
Javascript IntersectionObserver on Inactive Tab?
I tried to use IntersectionObserver to check, when an element (button) is visible.
But when i tab out, so the tab is inactive, he doesnt see it anymore. When i tab in, he sends the console.log found ...
0
votes
0
answers
205
views
Testing code for infinite scrolling functionality using IntersectionObserver
I'm currently working on a React + TypeScript + React Query project, and I'm having trouble writing test code!
The first piece of code is the MainGrid component, where I am using a custom hook called ...
- 1
1
vote
1
answer
194
views
Intersection Observer counting all elements and adding delay
I would like to use Intersection Observer to trigger an animation on each item of my grid layout and use a staggered effect while observing them.
My code doesn't seem to work when I use count to count ...
- 539
0
votes
1
answer
369
views
Vue3 template ref via default slot always null (render function syntax)
Update ---> In hindsight, I don't recommend doing it this way. It was much easier for the slot parent (InfiniteScroll) to pass a callback via props to the child (List) which sets the child ref in ...
- 5,970
0
votes
1
answer
79
views
Intersection Observer Not Detecting Collisions in React Breakout Game with TypeScript
I'm working on a Breakout game in React using TypeScript. The game is divided into three main components: WallGrid, Ball, and PlayerSlider. These components are connected using a Game component. I'm ...
0
votes
1
answer
326
views
vue 3 composition api, can not return value from a helper function to component
i think this is a problem of scope inside my helper function, i have successfully implementing the same logic in my component and it works perfectly
i have already using a composable function to use ...
0
votes
1
answer
38
views
Create a WeakSet of all elements whose layout overflows documentElement
I want to create a WeakSet of all elements that are not 100% contained within the css layout bounds of the document root (<html> tag). I need it to update in real time and not have a huge hit on ...
- 13.2k
0
votes
1
answer
147
views
State in IntersectionObserver callback is undefined
I have a react app that displays a grid of 3 columns. I'm trying to implement the Intersection Observer Api to enable infinite scroll, however, it's not working. The following code prints out:
in ...
- 944
1
vote
0
answers
75
views
I am trying to use intersection observer to continuously call an api. But the api call happens only for the first time
I am trying to call the api when I reach the bottom of the element(once 100% of the content is loaded in the viewport). But the api call is happening only for the first time and it is not triggered ...
- 23
0
votes
1
answer
458
views
Managing IntersectionObserver with SwiperJS Autoplay
I'm trying to set up an IntersectionObserver on my feedback section, which has an autoplay feature. I use SwiperJS in Vue 3. First check if the section is visible and then start autoplay, otherwise, I ...
- 573
1
vote
1
answer
117
views
IntersectionObserver callback is being run even if the target isnt on the viewport
I am trying to execute a function when an element is visible in the viewport but the callback is running even if the element is wayyy below.
this is App.jsx
import {useState,useEffect,useRef} from '...
- 159
0
votes
0
answers
134
views
Detect a blog Post and get the view count with Intersection Observer on the Nuxt app
I want to count the post view on a page of my Nuxt app when user scroll to it .
I have a list of posts on a page and I am using Intersection Observer to count Post views. When a user scrolls to a Post ...
- 361
1
vote
0
answers
43
views
angular enteredview directive
I've been trying to create an angular directive which animates images with a shift-up-transition once they enter the viewport. However it's not working as expected.
I created a StackBlitz here
The ...
- 3,749
2
votes
1
answer
74
views
How do I update blog post list with filtered results?
Running into an issue with my blog search function. When I submit the search form, the filters/params are updated but in order for the requested blog posts to be returned I have to manually refresh ...
- 21
0
votes
0
answers
46
views
Using Intersection Observer to Update React States
I'm using Intersection Observer API in my React Web App to watch my viewport and set my backgroundColor State so I can update the NavMenu color depending on location. I've been having trouble ...
- 11
1
vote
1
answer
504
views
How to fix IntersectionObserver causing a memory leak in my OpenLayers web app?
So I'm developing a web application called MSC AniMet. This application is coded using Vue2 and Vuetify2 and it's essentially a big OpenLayers map with a bunch of stuff and functionality added to it ...
- 73
0
votes
1
answer
172
views
Javascript Intersection Observer API problem
I have a problem related to the Intersection observer API in Javascript.
I wrote a little code where a svg "draws itself" when it enters the viewport and "erases itself" whet it ...
0
votes
1
answer
59
views
ClearTimeout through intersectionObserver
I have the following code which loads the next project in a portfolio based on an intersectionObserver result being true. However, if the user scrolls out and the intersectionObserver returns false, I ...
- 654
0
votes
2
answers
72
views
Run clearInterval with IntersectionObserver
I have a short code that runs a setInterval only when the element is in view, but for some reason it won't cancel when the element gets out of view. I don't know if I misunderstood InteractionObserver ...
- 391
0
votes
1
answer
437
views
vueUse useIntersectionObserver and rootMargin, triggering well before element is within range
I'm really confused what I'm doing wrong here. I'm trying to implement an infinitescroll that will load new items when the bottom edge of the target element is within 200px of the bottom of the ...
- 363
0
votes
1
answer
174
views
.querySelectorAll() returning an empty nodelist React js
Hi I'm new here and I was trying to learn react js along with intersection observer api,
I was trying to get all elements with .cards class using .querySelectorAll(".cards");,
my problem is ...
0
votes
1
answer
201
views
Intersection Observer not acknowledging new items added on click
I have a group of items that I'm running an animation on. After clicking on a button, more items are added with the same class. These items are being added in groups of 4.
At first intersection ...
- 356
0
votes
1
answer
62
views
Elements jumping on the screen non-stop, when element is on the edge of being in intersection (Intersection Observer)
I have a page with a sticky footer with stacked buttons, when the footer is not entirely on viewport I hide one of the buttons, when the footer is in place I show the buttons, the problem is when the ...
- 11
3
votes
1
answer
898
views
Different intersectionRatio for same element when using IntersectionObserver in React
I am running into a problem where my intersection observer has two entries both of whose targets are identical but their intersectionRatio is different at the same time in the app. Why could this be? ...
- 325
0
votes
0
answers
40
views
Can't Add Classes With intersectionObserver JavaScript API
I once tried to follow a tutorial from FireShip about Scroll Animations. I followed everything that is in the video, but somehow can't get the JavaScript code to work. When I run it, it's just a black ...
1
vote
0
answers
99
views
The Intersection Observer does not call a callback in react
My component is a window with a hint. Its location is indicated in prop ___ . I want to implement a window visibility check with a hint. If the tooltip is partially closed in the current position, ...
1
vote
0
answers
141
views
TypeScript doesn`t support IntersectionObserver v2 "delay" and "trackVisibility" options
During IntersectionObserver initialization, I encounter a TypeScript error that says "Object literal may only specify known properties, and 'trackVisibility' does not exist in type '...
0
votes
0
answers
183
views
Detect intersection between two components in ReactJS using IntersectionObserver
I am trying to implement an intersectionObserver to watch if a isIntersecting, but specifically only with another
My Attempt :-
export const Main = () => {
const sectionRef = useRef(null);
...
- 129
0
votes
0
answers
64
views
IntersectionObserver : Entry not recognized anymore when a class or a style has been added to it
I'm going to explain this issue the easiest way i can :
this works ( i can get "entry from above" in the console) :
let count = 0;
const stickyElementsObserver = new ...
- 3
1
vote
1
answer
83
views
React: prevent useContext from re-rendering the whole app or share data between components without re-rendering all of them
I have a simple app with a Header.tsx component that is supposed to be available to all pages and a Home.tsx in which the most of the content will be.
Home.tsx hosts a intersectionObserver that sends ...
0
votes
1
answer
571
views
Does IntersectionObserver consider visible a div that is inside the viewport, but covered by another div? [closed]
I'm having issues with Intersection Observer and don't really know what's the problem. So I've got a question as I'm curious:
Let's imagine 2 divs A & B
A & B are both 100vw by 100vh (full ...
- 41
2
votes
1
answer
118
views
Keyframe animations with Intersection Observer run unexpectedly when clicking on child elements with onclick
I want css keyframe animations to run 1 time when the bridge element is in the viewport. Intersect observer does this well, but the issue is the animations fire randomly when clicking on other parts ...
- 23