Интеграция с реакцией-виртуализацией и реагированием на пользовательские прокрутки

Question

Я пытаюсь интегрировать пользовательскую полосу прокрутки (используя переменные полосы пользовательского прокрутки: https://github.com/malte-wessel/react-custom-scrollbars) для компонента Grid (с использованием интерактивного виртуализатора).

Я попытался следовать инструкциям из этой проблемы github (https://github.com/bvaughn/react-virtualized/issues/143), но не было никакой удачи.

Любое понимание использования этих двух библиотек вместе было бы действительно оценено!

Обновление: после поиска в громадной комнате реактивного виртуализации я последовал за одним предложением о том, что с использованием пакета perfect-scrollbar (вместо реагирования на пользовательские полосы прокрутки) и взаимодействия с виртуализацией вместе. Пока они хорошо работают.

Answer 1

Вы можете обернуть сетку в панели пользовательских прокруток и передать событие onScroll. Этот код работает для меня.

import React from 'react'; 
import { Grid } from 'react-virtualized'; 
import { Scrollbars } from 'react-custom-scrollbars'; 

class ScrollableGrid extends React.Component { 
    handleScroll = ({ target }) => { 
     const { scrollTop, scrollLeft } = target; 

     this.Grid.handleScrollEvent({ scrollTop, scrollLeft }); 
    }; 

    Grid = null; 

    render() { 
     const { width, height } = this.props; 

     return (
      <Scrollbars autoHide style={{ width, height }} onScroll={this.handleScroll}> 
       <Grid 
        {...this.props} 
        ref={instance => (this.Grid = instance)} 
        style={{ 
         overflowX: false, 
         overflowY: false 
        }} 
       /> 
      </Scrollbars> 
     ); 
    } 
} 

const list = [ 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125], 
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125] 
]; 

ReactDOM.render(
    <ScrollableGrid 
     cellRenderer={({ columnIndex, key, rowIndex, style }) => { 
      return (
       <div key={key} style={style}> 
        {list[rowIndex][columnIndex]} 
       </div> 
      ); 
     }} 
     columnCount={list[0].length} 
     columnWidth={100} 
     height={300} 
     rowCount={list.length} 
     rowHeight={30} 
     width={300} 
    />, 
    document.getElementById('example') 
); 

Вы можете видеть пример со списком и еще некоторый контекст in github issue