[BUG] Scroll snap prevents programmatic scrolling to items not rendered - Githubissues

petyosi / react-virtuoso

The most powerful virtual list component for React

https://virtuoso.dev

MIT License

5.16k stars 299 forks source link

[BUG] Scroll snap prevents programmatic scrolling to items not rendered #1021

Closed jeffaburt closed 8 months ago

jeffaburt commented 8 months ago

Describe the bug When scroll snap is enabled (scrollSnapType and scrollSnapAlign), scrollTo*(...) methods do not scroll to the right place. Disabling scroll snap restores proper scrollTo behavior.

Reproduction

Scenario 1: TikTok style UI (where each item takes up full screen)

https://codesandbox.io/p/sandbox/react-virtuoso-full-height-cytgrc

By default, the "Scroll to 1" button does not advance to index 1 when scroll snap is enabled.
When you manually scroll to index 1 and then back to index 0, "Scroll to 1" all of a sudden works.
It seems that when scroll snap is enabled, "scroll to" will only advance to items that are already rendered.

https://github.com/petyosi/react-virtuoso/assets/2835199/5fb37900-fb3d-436d-8a4a-db9ccf9d33ae

Scenario 2: Normal UI where multiple items are shown on the screen

https://codesandbox.io/p/sandbox/react-virtuoso-scroll-snap-normal-height-39mt4x

By default, the "Scroll to 50" button does not advance to index 50 when scroll snap is enabled.
It seems that when scroll snap is enabled, "scroll to" will only advance to indexes that are already rendered.

https://github.com/petyosi/react-virtuoso/assets/2835199/8ce01db0-9941-47f4-887a-c7bc721bf706

When you scroll to a few items past index 0, "Scroll to 0" stops working.
It seems that when scroll snap is enabled, "scroll to" is unable to return to previous indexes that are no longer rendered.

https://github.com/petyosi/react-virtuoso/assets/2835199/2a8e2337-f836-4643-84b8-3c848d2e61c7

To Reproduce

Enable CSS scroll snap
Call any of the scrollTo*(...) methods

Expected behavior The item specified should be visible on screen.

Desktop (please complete the following information):

OS: macOS Ventura 13.2.1
Browser: Chrome Version 120.0.6099.129

petyosi commented 8 months ago

While I understand why you may consider this a bug, the library has never claimed supporting scroll snap. If you're interested in exploring the underlying problem, I'm happy to accept a PR on the matters. However, I am not going to work on that by myself, as my own usage of the library has no use case for it.