javascript - React Virtualized 列表在滚动时是否可以捕捉到整行？

Question

我有一个 React 虚拟化 <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 处理程序调用scrollToCell并捕捉到特定行。

编辑:这是我所讨论内容的一个粗略示例:https://codesandbox.io/s/545y634jxx