防止浏览器滚动条在内容调整大小时改变位置

如何解决防止浏览器滚动条在内容调整大小时改变位置

我想防止滚动条在内容调整大小时改变其位置。

下面的代码段将创建一个具有 100 行的可滚动固定高度 div。每行的高度根据使用 vw 的窗口宽度而变化。如果调整窗口大小，行将更改其高度，滚动条将更改其位置。在某些浏览器上，有时滚动条可能会锁定在固定元素上，但前提是它们的 y 位置恰好匹配。

如何将滚动条固定在同一位置？该解决方案也应该适用于 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>