title: Starting with scroll at bottom ReactJS
body: <p>I have 2 components (parent and child). The child component has a long list of messages from from server in a scrollable div. I simply want to start the page with the scroll at the bottom - like a normal chat. I don’t want to see it scroll to the bottom. Can I do this with javascript or CSS?</p>
  <p>Here's an example of what I want. Note: <strong>Not using FlatLists</strong>.
  <a href="https://codesandbox.io/s/react-native-h32if?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/react-native-h32if?file=/src/App.js</a></p>
  <p>Thanks in advance.</p>
  <pre><code>class ParentComponent extends Component{
  
      render(){
        return(
    
          &lt;div&gt;
                  &lt;ChildComponent key={uniqueKey()} stream_uid={this.props.match.params.stream_uid} /&gt;       
          &lt;/div&gt;
        )
      }
    
  }
  
  
  class ChildComponent extends Component{
  
      constructor() {
  
          this.state = {
            chat_messages: []
          }
  
      }
  
      componentDidMount () {
  
          this.props.dispatch(getStream(this.props.stream_uid,1,this.props.history)); 
  
          if(this.props.stream) {
  
              this.setState({
                  chat_messages: this.props.stream.stream.messages
              })
          }
  
      }
  
    render(){
  
      return(
          &lt;div&gt;
  
              {Array.isArray(this.state.chat_messages) &amp;&amp; this.state.chat_messages.map(message =&gt; {                           
                  return (
                      &lt;div&gt;
                          &lt;div&gt;{message.username}&lt;/div&gt;
                          &lt;div&gt;{message.text}&lt;/div&gt;
                      &lt;/div&gt;
                  )
  
              })}                                                            
          &lt;/div&gt;
  
      )
  
    }
  }
  
  </code></pre>