response-custom-scrollbars переходит в начало при любом действии

Question

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

ОБНОВЛЕНИЕ:

Я считаю, что мне нужно перечислить onUpdate и обработать позицию прокрутки там.Если это изменилось, то обновить, если нет, не переместить позицию?

В коде у меня есть вызов HOC с Scrollbar следующим образом:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import AutoSizer from 'react-virtualized-auto-sizer';
import { Scrollbars } from 'react-custom-scrollbars';

import { colors } from '../../theme/vars';
import { themes } from '../../types';



// This is a Higher Order Component (HOC) used to
// provide a scroll bar to other components

export default (ChildComponent, styling) => {
  class ComposedComponent extends Component {

    state = {
      // position: ??
    };

    handleUpdate = () => {
      //update position
      //this.scrollbar.scrollToBottom();
    };
    render() {
      return (

        <AutoSizer>
          {
            ({ width, height }) => (
              <Scrollbars
                style={{ width, height, backgroundColor: colors.WHITE, overflow: 'hidden', ...styling }}
                onUpdate={() => this.handleUpdate()}
                renderThumbVertical={props => <Thumb {...props} />}
                autoHide
                autoHideTimeout={1000}
                autoHideDuration={200}
              >
                <ChildComponent {...this.props} />
              </Scrollbars>
            )
          }
        </AutoSizer>
      );
    }
  }

  return ComposedComponent;
};


const Thumb = styled.div`
  background-color: ${props =>
    props.theme.theme === themes.LIGHT ? colors.BLACK : colors.WHITE};
  border-radius: 4px;
`;

в моем компоненте MainView. Я просто обертываю экспорт следующим образом:

export default withScrollbar(LanguageProvider(connect(mapStateToProps, null)(MainView)));

У меня естьПрочитайте несколько похожих вопросов по этому поводу: Как установить начальное значение scrollTop на и это событие scrollTo , но я не могу понять, как реализовать в моем случае.Любые советы или предложения с благодарностью.

Answer 1

Так что я нашел способ заставить это работать, и это похоже на полный взлом, но я пишу в надежде, что это может помочь кому-то еще.

import React, { Component  } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import AutoSizer from 'react-virtualized-auto-sizer';
import { Scrollbars } from 'react-custom-scrollbars';

import { colors } from '../../theme/vars';
import { themes } from '../../types';



// This is a Higher Order Component (HOC) used to
// provide a scroll bar to other components

export default (ChildComponent, styling) => {
  class ComposedComponent extends Component {

    state = {
      stateScrollTop: 0,
    };

    onScrollStart = () => {
      if (this.props.childRef) { // need to pass in a ref from the child component
        const { scrollTop } = this.props.childRef.current.getValues();
        const deltaY = Math.abs(scrollTop - this.state.stateScrollTop);
        if (deltaY > 100) { // 100 is arbitrary. It should not be a high value...
          this.props.childRef.current.scrollTop(this.state.stateScrollTop);
        }
      }
    };

    handleUpdate = () => {
      if (this.props.childRef) {
        const { scrollTop } = this.props.childRef.current.getValues();
        this.setState({ stateScrollTop: scrollTop });
      }
    };

    render() {
      return (
        <AutoSizer>
          {
            ({ width, height }) => (
              <Scrollbars
                ref={this.props.childRef}
                style={{ width, height, backgroundColor: colors.WHITE, overflow: 'hidden', ...styling }}
                onScrollStart={e => this.onScrollStart(e)}
                onUpdate={e => this.handleUpdate(e)}
                renderThumbVertical={props => <Thumb {...props} />}
                autoHide
                autoHideTimeout={1000}
                autoHideDuration={200}
              >
                <ChildComponent {...this.props} />
              </Scrollbars>
            )
          }
        </AutoSizer>
      );
    }
  }

  return ComposedComponent;
};


const Thumb = styled.div`
  background-color: ${props =>
    props.theme.theme === themes.LIGHT ? colors.BLACK : colors.WHITE};
  border-radius: 4px;
`;

Я использую этот HOC следующим образом:

1. создать ссылку для компонента, который вы хотите использовать с
2. передать ссылку на компонент, который будет использовать HOC:

class SomeChildComponent extends Component {
...
viewRef = React.createRef();
...
render() {
  return ( <MainView childRef={this.viewRef} />)
}

3. импорт и упаковка компонента

import withScrollbar from '../../hoc/withScrollbar';
...
export default withScrollbar(MainView);