spamming scrollToIndex scroll bug
Hi,
I'm using virtual to create a swiper of many items. I bind an index increment onKeyDown arrows.
Despite a throttle on the key press, when spamming one arrow (or keep pressing) scroll starts shaking and bugging.
I have scroll behavior "smooth", and it does the same with scrollToOffset method and I'm running out of Idea on how to deal with this...
Any help would be much appreciated.
8 Replies
other-emerald•2y ago
Hi, hard to say, if you could create a codesandbox example, then i can have a look.
overall smooth can be problematic in some cases, try scrolling without it and see how it works
sunny-greenOP•2y ago
Scrolling without behavior smooth is working just fine, but item are just skipping from one to another. Ill try to provide you a codesandbox as soon as I can.
sunny-greenOP•2y ago
spacewalker
CodeSandbox
virtual-spam-index - CodeSandbox
virtual-spam-index by spacewalker using @tanstack/react-virtual, loader-utils, lodash.throttle, react, react-dom, react-scripts
sunny-greenOP•2y ago
so basically if you press right arrow and keep pressing it, you will see that it starts going forward but with small steps until the key release or the reach of the end of the list. I would like something as netflix does when you going right or left, with some linear ease, do you see what I mean ?
@piecyk
think this is the equivalent of what im looking for : https://bvaughn.github.io/react-virtualized/?component=ArrowKeyStepper#/components/List
other-emerald•2y ago
Ok, it's not connected to virutalizer but how the smooth scrolling is works internally, if you comment out the key handler it will work the same as in react-virtualized via browser impl.
Maybe you can block scrolling to next item when one is still pending 🤔
sunny-greenOP•2y ago
what do you mean by "comment out the key handler it will work the same as in react-virtualized via browser impl. "
"Maybe you can block scrolling to next item when one is still pending", how ?..
Don"t know if I can do anything with scrollToFn ?
If you have an idea on how to implement this would be much appreciated 😁 thanks for you community involvement 🙌
other-emerald•2y ago
what do you mean by "comment out the key handler it will work the same as in react-virtualized via browser impl. "like default browser handling when pressing arrow up/down on scrollable div
If you have an idea on how to implement this would be much appreciated 😁 thanks for you community involvement 🙌will try to have a look, when got a moment
sunny-greenOP•2y ago
"like default browser handling when pressing arrow up/down on scrollable div" can't do that as I have multiple rows and focus managment is programmatic...