search

bvaughn / react-window

React components for efficiently rendering large lists and tabular data
https://react-window.now.sh/
MIT License
15.72k stars 782 forks source link

Scrolling with support of CSS "scroll-snap-align" property #669

Closed kigo9 closed 3 weeks ago

kigo9 commented 2 years ago

Hello! First of all, thanks for an awesome library!

I would like to know if it is possible to add support for CSS "scroll-snap-align". So that you could render, let's say, 100 children elements with only 3 in a viewport and always align the second one in the center (using scroll-snap-align: center) after scrolling stops. Like it is done here (https://codesandbox.io/s/scroll-snap-qx0di), but with a "windowing" opportunity. I found some solutions that kind of try to do the same with JS (https://codesandbox.io/s/p3zry30rl0), but they do the alignment really rough.

I need this in order to implement active value selection by swiping the list. So that the value in the middle is currently active and highlighted.

But maybe I missed something and this functionality is already available? Would really appreciate getting the answer to this. Thanks in advance

spyshower commented 1 year ago

Pass a className as a prop to the FixedSizeList (not sure about the other 3 components). The className should have the scroll-snap-type: y mandatory; css property. The items inside should have the scroll-snap-align: center; css property.