React-custom-scrollbars: Start on bottom?

[mxseev]

Good afternoon.
Is possible will start (load) in bottom position?
_Yes, i am known when i can scrollToBottom() on loading, but in this case will animation. It spoils UI ((`_

Thanks.

[malte-wessel]

I'm not sure that this is possible. The library uses the native scrolling behaviour of the browser, and I'm not aware of any solution for this.

[artsx]

it would be good that this option is added!
For sites that use a tchat is handy

[Enijar]

Add a ref to the <Scrollbars ref="scrollbars"/> component, then call this.refs.scrollbars.scrollToBottom().

Update

In the new React versions you will have to call the scrollToBottom method on the scrollbars ref like this.

class MyComponent extends React.Component {
  scrollbars = React.createRef();
  state = {
    mounted: false,
  }

  componentDidMount() {
    this.setState({mounted: true});
  }

  componentDidUpdate() {
    this.state.mounted && this.scrollbars.current.scrollToBottom();
  }

  render() {
    return <Scrollbars ref={this.scrollbars}/>;
  }
}

[jayendra-sharan]

@Enijar Worked for me. Thanks.

Add a ref to the <Scrollbars ref="scrollbars"/>

component, then call this.refs.scrollbars.scrollToBottom().

[auaden]

i called this.refs.scrollbars.scrollToBottom() in componentDidMount(), doesn't work

[deepika1223]

is there is any alternative to "refs"?

[Agrafador]

@deepika1223 yes, you can do like this:

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

componentDidMount(){ this.msgsScrollbars.current.scrollToBottom(); }

<Scrollbars ref={this.msgsScrollbars}>

[vijitail]

@Agrafador Your solution works but, the initial render starts from the top and jumps to the bottom when componentDidMount() is called. Any solution with componentWillMount() ?