react-custom-scrollbars dynamic content scroll

[jai1331]

I have been using react-custom-scrollbars for custom scrolling in my app, there comes a point, the data would be dynamic and scroll should go to bottom or recent data added.

simple react-custom-scrollbar looks like below:

 import { Scrollbars } from 'react-custom-scrollbars';

 class App extends Component {
   render() {
     return (
       <Scrollbars style={{ width: 500, height: 300 }}>
         <p>Some great content...</p>
       </Scrollbars>
     );
   }
 }

above code works fine, In my case the content

Some great content...

is dynamic.

tried adding dynamic data and done with it, the real problem occurred in scroll. The scroll should go to an element added recently, and it worked but it stopped working the native scroll functionality after that.

You can see the entire code here

Any help on this really appreciated.

[xobotyi]

@jai1331 Aactualy it works as it should=) setState() triggering componentDidUpdate() which scrolls the content to the top.

[naycho334]

import { Scrollbars } from 'react-custom-scrollbars';

 class App extends Component {
   render() {
     return (
       <Scrollbars 
               style={{ width: 500, height: 300 }}
               ref={ e=> this.scrollBar = e }
               onUpdate={ this.handleUpdate.bind( this ) }
       >
         <p>Some great content...</p>
       </Scrollbars>
     );
   }
  handleUpdate(){
     this.scrollBar.scrollToBottom()
  }
 }