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.

You could try setting the scroll position manually. It's tricky, but you would need to get the existing vertical scroll position of the element as well as the existing vertical scroll position of the window.

Based on your fiddle, I adjusted the addBubbles function to make it work

    async function addBubbles () {
        let newelementwrapper = document.getElementById('newelementwrapper')

        for (let i = 0; i < 100; i++) {
            // Get current scroll position
            let windowPosition = window.scrollY,
                elementPosition = newelementwrapper.scrollTop;

            //Create bubble
            const bubble = '<div class="element">Element</div>'

            //Insert bubble
            bubblesContainer.insertAdjacentHTML('afterbegin',bubble);

            // Set scroll position
            newelementwrapper.scrollTop = elementPosition
            window.scrollTo(0, windowPosition)

            //Delay
            await timer(1000);
        }
    }

One thing I noticed is that in your fiddle you are adding new elements to the bottom of the div instead of the top, but in your original question you indicated you were adding divs to the top of an element. Not sure if this solution would work with that but it's a starting point.