У меня есть компонент React Virtualized <List>, который используется как раскрывающееся меню. Я бы хотел, чтобы список прокручивал целую строку за раз, как в обычном меню уровня ОС, или, по крайней мере, привязывался к целой строке, когда прокрутка останавливается.
Я установил scrollToAlignment="top", думая, что это может сработать, но теперь я понял, что это испортило поведение прокрутки при установке scrollToIndex.
Есть событие onScroll, и я полагаю, что я мог бы установить тайм-аут для срабатывания, если другое событие не было получено в определенном окне, а затем заставить scrollTop показывать полную строку. Но я надеялся, что есть более чистый способ сделать это.
Возможное решение
Подобно ответу ниже Брайанвона, я собрал решение, использующее событие 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, но надеялся на более современную реализацию. :)
