Solution: Compability with react-custom-scrollbars

After a long discussion in #143 I also took a shot at this problem and arrived to the following solution:

import React, { Component } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import { List } from 'react-virtualized';

const SCROLL_DIRECTION_BACKWARD = -1;
const SCROLL_DIRECTION_FORWARD = 1;
const SCROLL_POSITION_CHANGE_REASON_OBSERVED = 'observed';

const listStyle = {
  overflowX: false,
  overflowY: false,
};

export default class SmartList extends Component {
  _getScrollDirection(scrollTop) {
    const {
      scrollTop: oldScrollTop,
      scrollDirectionVertical,
    } = this.List.Grid.state;

    if (scrollTop !== oldScrollTop) {
      return scrollTop > oldScrollTop ?
        SCROLL_DIRECTION_FORWARD :
        SCROLL_DIRECTION_BACKWARD;
    }

    return scrollDirectionVertical;
  }

  handleScroll = ({ target }) => {
    const {
      scrollTop,
      scrollLeft,
    } = target;

    const { Grid: grid } = this.List;

    grid._debounceScrollEnded();

    const scrollDirectionVertical = this._getScrollDirection(scrollTop);
    const totalColumnsWidth = grid._columnSizeAndPositionManager.getTotalSize();
    const totalRowsHeight = grid._rowSizeAndPositionManager.getTotalSize();

    grid.setState({
      isScrolling: true,
      scrollDirectionVertical,
      scrollTop,
      scrollPositionChangeReason: SCROLL_POSITION_CHANGE_REASON_OBSERVED,
    });

    grid._invokeOnScrollMemoizer({ scrollLeft, scrollTop, totalColumnsWidth, totalRowsHeight });
  };

  List = null;

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

    return (
      <Scrollbars
        autoHide
        style={{ width, height }}
        onScroll={this.handleScroll}
      >
        <List
          {...this.props}
          ref={instance => (this.List = instance)}
          style={listStyle}
        />
      </Scrollbars>
    );
  }
}

You can see that I’ve pretty much rewritten the _onScroll method in https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.js#L1110

The simplest way to make this work will be to add a way to bypass the container node check in _onScroll.

@bvaughn what do you think?

[alexpyzhianov]

For anyone who struggles with handleScrollEvent and doesn’t understand how it is related to the code snippet above, here how it all looks with the new method. @5angel tons of 👍 to you

import React, { Component } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import { List } from 'react-virtualized';

const listStyle = {
  overflowX: false,
  overflowY: false,
};

export default class SmartList extends Component {
  handleScroll = ({ target }) => {
    const { scrollTop, scrollLeft } = target;

    const { Grid: grid } = this.List;

    grid.handleScrollEvent({ scrollTop, scrollLeft });
  }

  List = null;

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

    return (
      <Scrollbars
        autoHide
        style={{ width, height }}
        onScroll={this.handleScroll}
      >
        <List
          {...this.props}
          ref={instance => (this.List = instance)}
          style={listStyle}
        />
      </Scrollbars>
    );
  }
}

[serle]

Can this technique be used with the table and would it let the headers be fixed and only scroll the data?