JSFiddle - React, Tailwind, and code Playground

by David Rickard

HTML

<button id="swapButton">Swap B and C</button>
<div class="scroller">
  <div id="list">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
    <div>H</div>
    <div>I</div>
    <div>J</div>
    <div>K</div>
  </div>
</div>
<ol>
  <li>Scroll down so B or C is at the top of the scroll pane</li>
  <li>Click "Swap B and C"</li>
</ol>

<p>
Expected result:
<br />
Scroll position remains the same
</p>

<p>
Actual result:
<br />
Scroll position moves up
</p>

CSS

.scroller {
    width: 300px;
    height: 300px;
    overflow-y: auto;
    border: 2px solid green;
}

#list > div {
  height: 40px;
  border: 1px solid blue;
}

JavaScript

const list = document.getElementById("list");

document.getElementById("swapButton").addEventListener("click", e => {
	list.insertBefore(list.children[1], list.children[3]);
});