React-window: реагировать на настраиваемую полосу прокрутки с реактивным окном

Эта библиотека и react-virtualized - совершенно разные реализации. Общие методы, которые вы видите в вопросах react-virtualized часто могут дать полезные подсказки относительно того, как к чему-то подойти, но конкретные детали реализации, подобные этой, не применимы. (В react-virtualized List украшает компонент Grid . В react-window они являются отдельными компонентами для лучшей производительности и размера.)

Я не знаю, будет ли что-то вроде react-custom-scrollbar работать с react-window поскольку я никогда не пробовал. Честно говоря, я не очень заинтересован в поддержке этого, поскольку я считаю, что настраиваемые полосы прокрутки, как правило, плохая идея из-за того, как они влияют на производительность. Итак, я закрываю этот вопрос.

Но мы можем продолжить обсуждение этого вопроса, если у вас возникнут дополнительные вопросы 😄

Я кое-что выясню, мне интересно использовать react-window потому что он легкий и решает мою проблему. Даже я не люблю использовать настраиваемую полосу прокрутки, но это не в моих руках, нам нужен индивидуальный дизайн полосы прокрутки.

В худшем случае я использую react-virtualized .
Спасибо :)

@ Rahul-Sagore, вы в конечном итоге получили настраиваемые полосы прокрутки, работающие с react-window ?

Нет, на это не было времени. Нужно проверить и разобраться.

Не уверен, что @bvaughn одобряет это, но похоже, что это работает: https://codesandbox.io/s/00nw2w1jv

Лучшим подходом было бы передать Scrollbars как outerElementType

const CustomScrollbars = ({ onScroll, forwardedRef, style, children }) => {
  const refSetter = useCallback(scrollbarsRef => {
    if (scrollbarsRef) {
      forwardedRef(scrollbarsRef.view);
    } else {
      forwardedRef(null);
    }
  }, []);

  return (
    <Scrollbars
      ref={refSetter}
      style={{ ...style, overflow: "hidden" }}
      onScroll={onScroll}
    >
      {children}
    </Scrollbars>
  );
};

const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
  <CustomScrollbars {...props} forwardedRef={ref} />
));

// ...

<FixedSizeList
  outerElementType={CustomScrollbarsVirtualList}
  {...rest}
/>

пример https://codesandbox.io/s/vmr1l0p463

Мне нравится, сколько продвинутых возможностей можно сделать с помощью outerElementType или innerElementType

Я пытаюсь определить положение прокрутки в нижней части окна реакции.
Является ли это возможным? У вас есть идеи на этот счет? Я хотел бы получить пример codeandbox .

Вы должны иметь возможность использовать доступные реквизиты для запроса списка scrollHeight @rufoot.

Я пробовал использовать scrollHeight в реквизите. Но я думаю, что здесь нет свойства scrollHeight .
@bvaughn Ты

https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/scrolling-to-a-list-item

scrollToRow200Auto = () => { this.listRef.current.scrollToItem(200); console.log("current position = ", this.listRef.current.props.scrollHeight) };

текущая позиция = undefined

@rufoot что-то вроде этого https://codesandbox.io/s/4zjwwq98j4 ?

https://codesandbox.io/embed/jzo2lool2y

Когда вы прокручиваете вниз в нижней части окна реакции, вы можете увидеть одно предупреждение.

@piecyk Я пробовал ваше решение с outerElementType и оно очень медленное, вы его тестировали?: D

Я пробовал это с react-scrollbars-custom . Он менее медленный, но все еще медленный. У кого-то были проблемы с задержками при использовании настраиваемых полос прокрутки?

@ jancama2 не тестировал его Можете ли вы поделиться Code Sandbox, когда он тормозит?

@rufoot что-то вроде этого https://codesandbox.io/s/4zjwwq98j4 ?

Я использую вашу реализацию, но получаю сообщение об ошибке, что forwardedRef не является функцией.

Проблема в моем приложении, которую я пытаюсь решить, заключается в том, что у меня есть большой список элементов, и когда я нажимаю на один, приложение перенаправляет на другой маршрут, поэтому мне нужно отслеживать положение прокрутки (возможно, в сокращении) и затем установите положение прокрутки после изменения маршрута.

@piecyk вы пробовали объединить его с InfiniteLoader из react-window-infinite-loader .
Я использую react-scrollbars-custom и похоже ломает бесконечный загрузчик :(

Мой код:

<InfiniteLoader isItemLoaded={isItemLoaded} itemCount={items.total} loadMoreItems={loadMoreItems}>
      {({
        onItemsRendered,
        ref,
      }: {
        onItemsRendered: (props: ListOnItemsRenderedProps) => any;
        ref: React.Ref<any>;
      }) => (
        <List
          height={TABLE_HEIGHT}
          width={width}
          itemCount={items.total}
          itemSize={ROW_HEIGHT}
          onItemsRendered={onItemsRendered}
          itemData={{ items }}
          ref={ref}
          outerElementType={Scrollbar}
        >
          {Row}
        </List>
      )}
    </InfiniteLoader>

Обновление: я не думаю, что это связано с компонентом бесконечной прокрутки. Я не могу заставить его работать с настраиваемой полосой прокрутки.

Я был бы признателен, если бы кто-нибудь мог поделиться со мной реализацией для response-scrollbars-custom

@ranihorev вам нужно использовать этот пакет? Кодовое перо @piecyk, опубликованное выше, использует полосы прокрутки

Хорошо, мне нужно спросить еще раз. @piecyk Я использую ваш пример кода сверху (где вы ответили на @simjes ). вместо того, чтобы использовать список фиксированного размера, я использую автоматический размер, чтобы обернуть VariableSizeList и указать externalElementType. Что-то вроде этого:
<TreeRoot onDragOver={e => this.onDragOver(e)} > <AutoSizer> {({ height, width }) => ( <List treeRef={this.props.treeRef} width={width} height={height} itemSize={index => rowHeights[index]} itemCount={nodeTree.length} itemData={{ nodeTree, expandedNodes, nodesFetching, nodesFetchingFailed, selectedNode, selectedNodeId, resetRowHeight: this.resetRowHeight, }} outerElementType={TreeScrollbar} outerRef={this.props.outerRef} onScroll={({ scrollOffset, scrollUpdateWasRequested }) => { if (scrollUpdateWasRequested) { console.log('scrollOffset: ', scrollOffset); } }} > {Node} </List> )} </AutoSizer> </TreeRoot>

Я реализую CustomScrollbars и CustomScrollbarsVirtualList так же, как и вы, но ссылка всегда равна нулю. Я попытался создать ссылку в компоненте, в котором я использую AutoSizer, а также в его родительском элементе, но он всегда равен нулю. Я был бы очень признателен за помощь в понимании почему. Как я уже упоминал выше, мне нужно отслеживать позицию прокрутки и иметь возможность устанавливать ее при изменении маршрута в моем приложении, чтобы список не возвращался наверх.

@ChristopherHButler Я уже несколько раз использую этот пакет в своем коде, поэтому я бы предпочел продолжать использовать тот же пакет. Решение I очень похоже, но оно не извлекает новые данные.

@ChristopherHButler действительно сложно сказать без какого-либо примера проблемы в песочнице кода, вы можете чем-то поделиться?
Основная идея здесь состоит в том, чтобы установить ref из response-custom-scrollbars, чтобы окно реакции

AutoSizer или VariableSizeList будут работать с этим подходом, как в этом примере
https://codesandbox.io/s/react-window-custom-scrollbars-t4352

@ranihorev можете ли вы также поделиться примером Code Sandbox?

@piecyk Я создаю простой (и ломаный) пример:
https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-64kzh?fontsize=14

Я также пробовал другие варианты (например, установил ref как оболочку скроллера), но безуспешно ...

Спасибо!

@ranihorev этот подход будет одинаковым независимо от реализации пользовательской прокрутки. Им необходимо установить ссылку на тот же элемент, который отвечает за прокрутку и обработать это событие прокрутки.

react-scrollbars-custom предоставляет более приятный API с использованием шаблона реквизита рендеринга, поэтому вы можете сделать что-то вроде https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-pjyxs

Не выполнял профилирование, надеюсь, это поможет 👍

@piecyk Я работаю с вашей демонстрацией здесь: https://codesandbox.io/s/4zjwwq98j4 . Я хочу использовать onScrollStop для отправки действия в redux, чтобы я мог установить позицию прокрутки (идея из этого потока: https://github.com/malte-wessel/react-custom-scrollbars/issues/146, но onScrollStart и Похоже, что onScrollStop не работает в моем коде или в вашей демонстрации. Вы знаете, почему это так? Есть ли способ передать свойства из списка в полосы прокрутки?

@ChristopherHButler Я думаю, ваш лучший вариант - использовать контекст для передачи реквизита, что-то вроде

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-v2-usi1m

--- Отредактировано
Если вы отключите весь список при изменении маршрута, вы можете отправить действие, тогда Last scrollOffset может быть сохранен в ref и обновлен при каждом изменении прокрутки с помощью onScroll: function из VariableSizeList, тогда вам не нужно передавать реквизиты полосам прокрутки

@piecyk , это
Кстати, похоже, что все, что вам нужно, это функция onScroll (которую я пропустил), и нет необходимости вообще пересылать ссылку.
https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-99dn1

@piecyk, извините, я должен был упомянуть, что моя реализация VariableSizeList завернута в AutoSizer, а компонент, который его отображает, является компонентом на основе классов, поэтому я не уверен, что могу использовать контекст. Может поэтому я не могу заставить работать onScrollStop?

Быстрое обновление:
Я добавил состояние компонента и установил его на Scroll.

`
class BaseTree extends Component {
...
состояние = {scrollPosition: 0,};
...
listRef = React.createRef ();
externalRef = React.createRef ();
...
оказывать {
const {узлы, nodesFetching, nodesFetchingFailed, extendedNodes, selectedNode} = this.props;
возвращаться (

{({высота, ширина}) => (
ref = {this.listRef}
className = "Список"
externalRef = {this.outerRef}
externalElementType = {TreeScrollbar}
width = {width}
height = {height}
onScroll = {({scrollOffset}) => this.setState ({scrollPosition: scrollOffset})}
itemSize = {index => rowHeights [индекс]}
itemCount = {nodeTree.length}
itemData = {{
nodeTree
расширенные узлы,
узлы
nodesFetchingFailed,
selectedNode,
selectedNodeId,
resetRowHeight: this.resetRowHeight,
}}
>
{Узел}

)}

);
}}

const mapStateToProps = state => ({
scrollPosition: selectors.getTreeScrollPosition (состояние),
});

const mapDispatchToProps = dispatch => ({
setTreeScrollPosition: position => dispatch (actions.setTreeScrollPosition ({position})),
});

экспортировать соединение по умолчанию (mapStateToProps, mapDispatchToProps) (BaseTree);
`

затем на componentWillUnmout я отправляю действие, чтобы установить позицию в redux следующим образом:

componentWillUnmount() { this.props.setTreeScrollPosition(this.state.scrollPosition); }

Моя единственная проблема теперь - возможность установить положение прокрутки при повторном монтировании компонента. Я попытался получить доступ к методу scrollTop на this.listRef следующим образом:

this.listRef.current.scrollTop() но я получаю сообщение об ошибке, что это не функция. Я не уверен, какое свойство (this.listRef или this.outerRef) я могу использовать для установки позиции прокрутки или в каком методе. Я думал, что могу установить его в componentDidMount BaseTree следующим образом:
componentDidMount() { const { scrollPosition } = this.props; if (this.listRef.current) { // console.log('initializing scroll position to : ', scrollPosition); this.listRef.current.scrollTop(scrollPosition); } }
Любая помощь в этой работе будет принята с благодарностью!
edit: Мне очень жаль, но мой код, похоже, неправильно форматируется в этом редакторе, поэтому я прошу прощения за это :(

@ranihorev forward ref to response-window необходимо для работы таких функций, как scrollTo, scrollToItem

Контекст @ChristopherHButler должен работать точно так же, как они созданы, из документов

Контекст предоставляет способ передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне.

Но да, как упоминалось ранее, если вы размонтируете весь компонент при изменении маршрута, нет необходимости передавать реквизиты. Не будет хранить scrollPosition в состоянии, так как он вам не нужен во время прокрутки, меньше повторных рендеров, сохраните его по ссылке.

onScroll={({ scrollOffset }) => this.setState({ scrollPosition: scrollOffset })}

// to 

lastScrollOffsetRef = React.createRef(0);

<List
  onScroll={({ scrollOffset }) => {
    this.lastScrollOffsetRef.current = scrollOffset
  }}
  // ...rest
/>

// then in 
componentWillUnmount() { 
  this.props.setTreeScrollPosition(this.lastScrollOffsetRef.current); 
}

Что касается outerRef , в вашем случае это не нужно. listRef.current.scrollTo - правильный метод, который вы хотите использовать. Хм, ваша идея вызвать метод в componentDidMount верна и должна работать,

https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-80zo7

похоже на некоторую проблему синхронизации при установке ссылок, возможно, AutoSizer задерживает рендеринг списка, что делает this.listRef.current неопределенным,

хакерский вариант - прервать жизненный цикл реакции с помощью setTimeout и вызвать ссылку на следующем тике

componentDidMount() {
  window.setTimeout(() => {
    if (this.listRef.current) {
      this.listRef.current.scrollTo(this.props.scrollPosition);
    }
  }, 0);
}

@piecyk большое спасибо за помощь, я очень ценю это :)

Спасибо @piecyk Кажется, работает. После изменения маршрута при установке наблюдается небольшое мерцание, но я могу с этим жить :) Я также попробовал другой хак, который заключался в использовании className для передачи scrollPosition и установки scrollTop в refSetter CustomScrollbars:
if (scrollbarsRef) { forwardedRef(scrollbarsRef.view); // HACK scrollbarsRef.scrollTop(className); }
Вроде хорошо работает.
Еще раз спасибо за вашу помощь, очень признателен! 🙌🏻

К сожалению, все примеры в этом выпуске работают некорректно (иногда мышь перестает реагировать на прокрутку).

Но этот пример отлично работает!

@ranihorev этот подход будет одинаковым независимо от реализации пользовательской прокрутки. Им необходимо установить ссылку на тот же элемент, который отвечает за прокрутку и обработать это событие прокрутки.

react-scrollbars-custom предоставляет более приятный API с использованием шаблона реквизита рендеринга, поэтому вы можете сделать что-то вроде https://codesandbox.io/s/bvaughnreact-window-react-scrollbars-custom-pjyxs

Я пробовал это с react-scrollbars-custom . Он менее медленный, но все еще медленный. У кого-то были проблемы с задержками при использовании настраиваемых полос прокрутки?

Вы сделали это? Какое окончательное решение?

Если это кому-то поможет, мне удалось заставить его работать с OverlayScrollbars . Вам просто нужно передать событие прокрутки соответствующему элементу. Вот как:

const Overflow = ({ children, onScroll }) => {
  const ofRef = useRef(null);

  useEffect(() => {
    const el = ofRef.current.osInstance().getElements().viewport;

    if (onScroll) el.addEventListener('scroll', onScroll);

    return () => {
      if (onScroll) el.removeEventListener('scroll', onScroll);
    };
  }, [onScroll]);

  return (
    <OverlayScrollbarsComponent
      options={options}
      ref={ofRef}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
};

А затем в вашем виртуализированном компоненте:

<FixedSizeGrid
  {...props}
   outerElementType={Overflow}
>

Я использую это с FixedSizeGrid но он должен работать так же для списков.

Надеюсь, поможет.