wellyshen / react-cool-inview

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

Home Page:https://react-cool-inview.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

demo bug

Dogtiti opened this issue · comments

commented

@Dogtiti thanks for reporting.
What was your browser, OS and what did you do to achieve this?

@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

commented

Catched it!
Screenshot 2022-02-15 at 9 00 31 AM

Steps to reproduce: just scroll randomly and fast.
OS: MacOS
Browser:Chrome

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.

Thank you. I can reproduce the bug. I will take the time to fix it when I'm free.

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