滚动时，React虚拟化列表是否有可能捕捉到整行？

Question

I have a React Virtualized <List> component that's used as a drop-down menu. I'd like the list to scroll a whole row at a time, like a normal OS-level menu, or at least snap to a whole row when the scrolling stops.

I've set scrollToAlignment="top" , thinking that might do it, but now I realized that messed up the scrolling behavior when setting scrollToIndex .

There's an onScroll event, and I suppose I could set a timeout to fire if another event wasn't received within a certain window, and then force the scrollTop to show a full row. But I was hoping there might be a cleaner way to do it.

Possible solution

Similar to brianvaughn's answer below , I put together a solution using the onScroll event to call a debounced function that snaps the scrollTop to a whole row increment after a short delay:

const RowHeight = 45;

const ResultsList = React.createClass({
    list: null,

    snapRows: _.debounce(function(scrollTop)
    {
        this.list.scrollToPosition(Math.round(scrollTop / RowHeight) * RowHeight);
    }, 100),

    handleRef: function(ref)
    {
        this.list = ref;
    },

    onScroll: function(event)
    {
        this.snapRows(event.scrollTop);
    },

    rowRenderer: function(data)
    { ... },

    render: function()
    {
        var props = this.props;

        return <List
            ref={this.handleRef}
            width={490}
            height={450}
            rowCount={props.items.length}
            rowHeight={RowHeight}
            rowRenderer={this.rowRenderer}
            scrollToIndex={props.selectedIndex}
            onScroll={this.onScroll}
            {...props}
        />
    }
});

But I'm not really happy with it. The snap at the end of the scroll is a bit distracting, and can feel a little weird if you're still holding on to the scrollbar thumb.

I think the only way to make it feel like you're updating a list of items rather than smoothly scrolling a page is to handle the scroll events and manually position the elements so the rows are always snapped to an even row increment. I built a virtual list like that back in the days of IE5, but was hoping for a more modern implementation. :)

Answer 1

This is not a use-case I've implemented before so I haven't given it much thought, but you could use a debounced onScroll or onSectionRendered handler to call scrollToCell and snap to a specific row.

Edit : Here's a rough example of what I'm talking about: https://codesandbox.io/s/545y634jxx