Update InnerHTML Without Moving The Current View

Description

This is a test to see if updating innerHTML causes the view of the content to move when making updates. The expectation is that if there's the same amount of content, nothing will shift. This is shown in this example by scrolling down and clicking the Do Update button. The content block is updated with uppercase letters but the content view does not shift position.

HTML Source Code

<div id="contentSection">
  <p>The latch on the beck gate needed a nail.</p>
  <p>The goose was brought straight from the old market.</p>
  <p>The sink is the thing in which we pile dishes.</p>
  <p>A whiff of it will cure the most stubborn cold.</p>
  <p>The facts don’t always show who is right.</p>
  <p>She flaps her cape as she parades the street.</p>
  <p>See the player scoot to third base.</p>
  <p>Slide the bill between the two leaves.</p>
</div>

<button id="doUpdate">Do Update</button>

JavaScript Source Code

function updateContent() {
  document.getElementById('contentSection').innerHTML = ` 
  <p>THE LATCH ON THE BECK GATE NEEDED A NAIL.</p>
  <p>THE GOOSE WAS BROUGHT STRAIGHT FROM THE OLD MARKET.</p>
  <p>THE SINK IS THE THING IN WHICH WE PILE DISHES.</p>
  <p>A WHIFF OF IT WILL CURE THE MOST STUBBORN COLD.</p>
  <p>THE FACTS DON’T ALWAYS SHOW WHO IS RIGHT.</p>
  <p>SHE FLAPS HER CAPE AS SHE PARADES THE STREET.</p>
  <p>SEE THE PLAYER SCOOT TO THIRD BASE.</p>
  <p>SLIDE THE BILL BETWEEN THE TWO LEAVES.</p>
`
}

document.getElementById('doUpdate').addEventListener('click', updateContent)

Output