title: Stop automatic scrolling on page content change
body: <p>I have a page which adds and removes some content to itself on a scroll event.</p>
  
  <p>Now when using Chrome(IE11 doesn't seem to have this behaviour), whenever the content is added and removed to the page a scroll event is generated (I guess in order to keep the client view consistent on page changes). </p>
  
  <p>I don't want this. The scroll event generated on the content change will trigger more content changes which will in turn trigger more scroll events.</p>
  
  <p>Any advice on how I can stop this behaviour for all browsers? I don't want any automatic scrolling to happen. I only want user scrolling to be registered.</p>
  
  <p>Here is some simple example code. Clicking the "click" button will reshuffle the colored diffs and make the page scroll by itself (in Chrome, not IE11)...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function removeStuff(){
      var elem = document.getElementById("center");
      document.getElementById("container").removeChild(elem);
      document.getElementById("container").appendChild(elem);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#top {
      background-color: green;
      height:1500px;
  
  }
  
  #center {
      background-color: blue;
      height:1000px;
  }
  
  #bottom {
      background-color: red;
      height:1500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="top"&gt;&lt;/div&gt;
    &lt;div id="center"&gt;&lt;/div&gt;
    &lt;button id="button" onclick="removeStuff()"&gt;click&lt;/button&gt;
    &lt;div id="bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
     </code></pre>
  </div>
  </div>
  </p>