javascript - Prevent browser scrollbar from changing position on content resize

Question

I want to prevent the scrollbar from changing its position on content resize.

The snippet below will create a scrollable fixed height div with 100 rows. Each row's height changes based on the width of the window using vw. If the window is resized, the rows will change their height, and the scrollbar will change its position. On some browsers, sometimes the scrollbar might get locked on a fixed element but only if their y positions happen to match.

How can I keep the scrollbar fixed on the same position? The solution should also work on IE.

for(var i=0; i<100; i++) {
    $row = $(".row").clone();
    $row.removeClass("row");
    $row.show();
    $row.find(".1").text(i*2);
    $row.find(".2").text(i*2 + 1);

    $("#container").append($row);
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        
<div class="row" style="display: none">
    <div class="1" style="width: 100%; height: 8vw; background: #ddd">
    </div>
    <div class="2" style="width: 100%; height: 8vw; background: #bbb">
    </div>
</div>

<div id="container" style="width: 100%; height: 150px; overflow-x: hidden; overflow-y: scroll">
</div>

Answer 1

等待大神答复