Comments (6)
@Dogtiti thanks for reporting.
What was your browser, OS and what did you do to achieve this?
from react-cool-inview.
@max-sym Chrome 98.0.4758.102
I don't know what did I do ,I just play the demo in normal ways ,and then it shows as above
from react-cool-inview.
Steps to reproduce: just scroll randomly and fast.
OS: MacOS
Browser:Chrome
from react-cool-inview.
Hi there! I was trying to build an infinite scroll that updates the page number as the user scrolls (pretty much like the emojis update at the text above the box in the demo website, just using numbers instead). I believe that the bug I found might be related to this one.
Screen.Recording.2022-03-24.at.18.22.27.mov
It happens if as soon as you "arrive" in an element (i.e. the emoji updates), scroll in the opposite direction. It will not trigger the callbacks for the element immediately before the one you arrived (I believe it should, since you are now "going back"). This makes the pagination go crazy and skip pages if the scroll happen in this pattern.
Steps to reproduce (in demo): Scroll down slowly. As soon as the new emoji appears in the text above the box, scroll in the opposite direction. It will not update back to the previous emoji.
OS: MacOS
Browser: Brave
Does anyone have any clues of what may be causing this? I'd be happy to help if possible. Just need some starting point to start investigating.
Thanks for the amazing work, also. Great package.
Cheers.
from react-cool-inview.
Thank you. I can reproduce the bug. I will take the time to fix it when I'm free.
from react-cool-inview.
The problem is because the display area (root) takes the viewport as default value in the Intersection observer and also the margin style affect the synchronization between slides.
Now you can notice when both slides reach the half height of the slider, their intersection is triggered.
I made the fix above check it guys ;)
@wellyshen @heitorado
from react-cool-inview.
Related Issues (20)
- Is there a way to trigger onLeave when begin to leave HOT 5
- scrollDirection reports wrong direction HOT 2
- README should include TypeScript examples HOT 2
- rootMargin must have pixel or percentage unit, but the “Trigger Animations” example uses a rootMargin of "-100px 0" which throws an error. HOT 3
- Ref not updating when conditionally applied HOT 7
- Custom Ref not checked before calling (un)observe HOT 2
- rootMargin not working until after the first time intersecting HOT 9
- ScrollDirection isn't displaying the proper direction HOT 8
- inView is reporting incorrect value after loading more items until scroll. HOT 3
- Typescript typing wrong for observe HOT 2
- Demo image HOT 1
- Infinite rerenders when using ref={(el) => observe(el)} HOT 1
- Request support for multiple refs HOT 2
- SEO Question HOT 1
- Using cool inview only for src in a component HOT 1
- Observer not unmounted? HOT 19
- No InView component HOT 1
- Infinite re-renders HOT 1
- Is this preact friendly? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-cool-inview.