Stop automatic scrolling on page content change

Question

I have a page which adds and removes some content to itself on a scroll event.

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).

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.

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.

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)...

function removeStuff(){
    var elem = document.getElementById("center");
    document.getElementById("container").removeChild(elem);
    document.getElementById("container").appendChild(elem);
}

#top {
    background-color: green;
    height:1500px;

}

#center {
    background-color: blue;
    height:1000px;
}

#bottom {
    background-color: red;
    height:1500px;
}

<div id="container">
  <div id="top"></div>
  <div id="center"></div>
  <button id="button" onclick="removeStuff()">click</button>
  <div id="bottom"></div>
</div>

   

Answer 1

This is a Chromium feature recently added, called scroll-anchoring.

Disable in the browser: go to chrome://flags/#enable-scroll-anchoring and set "Scroll anchoring" to "Disabled".

Disable via CSS:

.some-element {
    overflow-anchor: none;
}