title: Reset scroll position on component re-render
body: <p>Have a look at this pen: <a href="https://codepen.io/segmentationfaulter/pen/XzgJyV" rel="nofollow noreferrer">https://codepen.io/segmentationfaulter/pen/XzgJyV</a></p>
  
  <p>I am also pasting the code here for convenience. Upon opening the pen above, you will see that a slider is rendered. Scroll the slider right, and the click on <code>change slides</code> button, you will see that slider is re-rendered with different numbers, but the scroll position of the slider is not reset. Why is the scroll position not reset? Thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function SliderElement({
    elementContent
  }) {
    return ( &lt;
      div className = 'slider-element' &gt; {
        elementContent
      } &lt; /div&gt;
    )
  }
  
  class Slider extends React.Component {
      render() {
          return ( &lt;
            div className = 'slider' &gt; {
              this.props.sliderContentArray.map(elementContent =&gt; &lt; SliderElement elementContent = {
                  elementContent
                }
                /&gt;)} &lt;
                /div&gt;
              )
            }
          }
  
          class SliderContainer extends React.Component {
            constructor() {
              super()
              this.slidersContent = [
                [1, 2, 3, 4, 5, 6, 7, 8],
                [9, 10, 11, 12, 13, 14, 15, 16]
              ]
  
              this.state = {
                currentSliderIndex: 0
              }
            }
            switchSlider() {
              this.setState((prevState) =&gt; {
                if (prevState.currentSliderIndex === 0) {
                  return {
                    currentSliderIndex: 1
                  }
                } else {
                  return {
                    currentSliderIndex: 0
                  }
                }
              })
            }
            render() {
              return ( &lt;
                div &gt;
                &lt;
                Slider sliderContentArray = {
                  this.slidersContent[this.state.currentSliderIndex]
                }
                /&gt; &lt;
                button className = 'slider-switch-button'
                onClick = {
                  this.switchSlider.bind(this)
                } &gt;
                change slides &lt;
                /button&gt; &lt;
                /div&gt;
              )
            }
          }
  
          ReactDOM.render( &lt;
            SliderContainer / &gt; ,
            document.getElementById('root')
          );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slider {
    display: flex;
    overflow: scroll;
  }
  
  .slider-element {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 100px;
    background: yellow;
  }
  
  .slider-element+.slider-element {
    margin-left: 10px;
  }
  
  .slider-switch-button {
    margin-top: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>