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或{{ 1}}处理程序，用于调用scrollToCell并捕捉到特定行。

修改：以下是我所谈论的一个粗略示例：https://codesandbox.io/s/545y634jxx

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

可能的解决方案

1 个答案: