Simplebar: ScrollTop with React

[sv-db]

I'm importing and showing Simplebar as follows

import SimpleBar from 'simplebar-react';
import 'simplebar/dist/simplebar.min.css';

class MessageContainer extends Component{
  ref;

  constructor(props) {
    super(props)
    this.ref = React.createRef()
  }

  renderMessages = () => {
    ....
  }

  render() {
    return (
      <SimpleBar autoHide={false} id={`scrollable`} ref={this.ref}>
        {this.renderMessages()}
      </SimpleBar>
    )
  }
}
````
I'm trying to make it scroll to the bottom when the component updates with the following code:

componentDidUpdate(prevProps, prevState, snapshot) {
cont scrollEl = this.ref.current.el;
scrollEl.scrollTop = scrollEl.scrollHeight;
}
```

But it doesn't want to work. As soon as I saw for a pair of divs, it does work.

Hope you can tell me what im doing wrong.

[sv-db]

Oke, so i've got it to work by grabbing the content wrapper like const scrollEl = this.ref.current.el.getElementsByClassName('simplebar-content-wrapper')[0]; and applying the scrollTop there

[Grsmto]

You are calling scrollTop on the wrong element. It should be the following:
this.ref.current.getScrollElement()

See doc