Issue where adding new elements to the top of container pushes the viewport down (scrolls the page down)

I have this code where I have a container that I’m dynamically adding new elements to the top of the container (Like news comming in from the top).
The issue is that when the viewport is scrolled down slightly it is pushed down each time e new element is added – And i would really like for that not to happen.

Here is a very simplified version of the code:

HTML

<div class="container">
   <div id="newelementwrapper">
   </div>
</div>

CSS

body{
      min-height:2000px;
    }
    .container {
      height: 500px;
      width: 100%;
      overflow: hidden;
      background-color: green;
    }
    
    #newelementwrapper {
      height: 100%;
      overflow-y: scroll;
    }
    
    .element {
      height: 100px;
      background-color: red;
      width: 400px;
      margin: 20px;
    }

JS:

// Returns a Promise that resolves after "ms" Milliseconds
    const bubblesContainer = document.getElementById("newelementwrapper")
    
    const timer = ms => new Promise(res => setTimeout(res, ms))

    //Creates and ads the bubbles from data and calls map functions width dealy specified by the timer
    async function addBubbles () {
        for (let i = 0; i < 100; i++) {
            //Create bubble
            const bubble = '<div class="element">Element</div>'
            //Insert bubble
            bubblesContainer.insertAdjacentHTML('afterbegin',bubble);
            //Delay
            await timer(1500);
        }
    }
    
    addBubbles()

Here is a fiddle with the same example:
https://jsfiddle.net/cpzbmh79/2/

You need to scroll down a bit for the issue to appear.