滚动时 React Virtualized 列表是否可以对齐整行？

Question

我有一个 React Virtualized <List> 组件，用作下拉菜单。我希望列表一次滚动一整行，就像普通的操作系统级菜单一样，或者至少在滚动停止时捕捉到整行。

我已经设置了scrollToAlignment="top"，认为可能会这样做，但现在我意识到设置scrollToIndex 时会搞砸滚动行为。

有一个onScroll 事件，我想如果在某个窗口内未收到另一个事件，我可以设置一个超时触发，然后强制scrollTop 显示整行。但我希望可能有一种更清洁的方法。

可能的解决方案

与 brianvaughn 的 answer below 类似，我使用 onScroll 事件调用去抖动函数，在短暂延迟后将 scrollTop 捕捉到整行增量：

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}
        />
    }
});

但我对此并不满意。滚动结束时的快照有点让人分心，如果您仍然按住滚动条拇指，可能会感觉有点奇怪。

我认为让您感觉像是在更新项目列表而不是平滑滚动页面的唯一方法是处理滚动事件并手动定位元素，以便始终将行对齐到偶数行增量。在 IE5 时代，我建立了一个类似的虚拟列表，但希望有一个更现代的实现。 :)

Answer 1

这不是我之前实现过的用例，所以我没有考虑太多，但您可以使用去抖动的onScroll 或onSectionRendered 处理程序来调用@987654321 @ 并捕捉到特定行。

编辑：这是我所说的一个粗略示例：https://codesandbox.io/s/545y634jxx