0

I have a container div with a fixed height (depending on 100vh i.e. window height). Inside that container, I have few accordions added which will affect the height of the area runtime when they get opened/closed. I have implemented a react-perfect-scrollbar in my container div.

It doesn't get updated when I open/close any of the accordions automatically, but works fine when I manually scroll that area. I need the updation of the scrollbar to be done automatically - when I open/close the accordions as well as when I resize the screen.

Here is the working link: https://codesandbox.io/s/heuristic-pascal-2sqmt?file=/src/Example.js

If anyone has got some fixes for this, please guide.

Harsh Manvar
  • 27,020
  • 6
  • 48
  • 102
Hiral Vadodaria
  • 19,158
  • 5
  • 39
  • 56

1 Answers1

1

the only solution I've found for this is from the documentation:

class Container extends Component {
  ...
  render() {
    return (
      <ScrollBar
        ref = {(ref) => { this._scrollBarRef = ref; }}
      >
        ...
       <ChildComponent
        onUpdateSize = {() => { this._scrollBarRef.updateScroll(); }}
       />
        ...
      </ScrollBar>
    );
  }
}
 
class ChildComponent extends Component {
  handleClick = () => {
    this.setState({
      show: !this.state.show,
    }, () => this.props.onUpdateSize());
  }
 
  render () {
    return (
      <div>
        <button onClick={this.handleClick} />
        { this.state.show ? <div /> }
      </div>
    )
  }
}
Shaurcasm
  • 33
  • 6