React-custom-scrollbars: No interface to bind scrollbar to bottom

Created on 20 Mar 2017 · 4Comments · Source: malte-wessel/react-custom-scrollbars

Hello!
I'm working with such thing as live-chat and the thing I got is there is no any interface to be able to bind scrollbar to bottom. E.g. when user receives a new message, chat window don't scrolling to bottom automatically and there is no variants (as I see) to do it in non-trash ways (like setTimeout on 10ms). By default scrollbar position binds to its top position
Any ideas how to make it friendly?

Source

limbosounds

Most helpful comment

class Demo extends Component{
  componetWillReceiveProps(nextProps){
   if(nextProps.scrollToBottom){
     this.refs.demoScrollBar.scrollToBottom();
   }
  }

  render(){
    return (
     <ScrollBar style={{width: '100%', height: '100%'}} ref="demoScrollBar">
     </ScrollBar>
    )
  }
}

xiguaaxigua on 19 Apr 2017

👍2 👎1

All 4 comments

class Demo extends Component{
  componetWillReceiveProps(nextProps){
   if(nextProps.scrollToBottom){
     this.refs.demoScrollBar.scrollToBottom();
   }
  }

  render(){
    return (
     <ScrollBar style={{width: '100%', height: '100%'}} ref="demoScrollBar">
     </ScrollBar>
    )
  }
}

xiguaaxigua on 19 Apr 2017

👍2 👎1

不知道你看不看得懂中文.用
componentDidUpdate(){
this.refs.demoScrollBar.scrollToBottom();
}
会更好一点儿吧

4300841 on 11 Dec 2017

Don't forget to disable autoscrolling if the user scrolls up to view messages they missed... http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html

philraj on 24 Jan 2018

Don't forget to disable autoscrolling if the user scrolls up to view messages they missed... http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html

How can I make this with "react-custom-scrollbars"? I don't understand this now moment.