移除DOM元素时如何防止视口偏移？解决HTML无限滚动跳转问题

我明白你遇到的困扰了——当你移除列表的第一个<div>时，页面整体高度会减少该元素的高度，浏览器会自动调整滚动位置，导致视口突然向后跳转。要解决这个问题，关键是在移除元素前记录它的高度，移除后手动补偿滚动偏移，让视口保持在原来的位置。

解决方案原理 #

1. 在移除第一个元素前，获取该元素的实际高度（包含margin，确保计算准确）
2. 移除元素后，将页面的滚动位置增加这个高度值——因为移除元素后页面总高度减少了对应数值，我们需要通过调整滚动位置来抵消这个变化，让视口内容保持不变

修改后的完整代码 #

<div id="inner-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
function removeit() {
    var tiles = $(".tile");
    if (tiles.length === 0) return;
    
    // 1. 获取要移除元素的完整高度（包含margin）
    var removedHeight = $(tiles[0]).outerHeight(true);
    // 2. 移除第一个元素
    $(tiles[0]).remove();
    // 3. 补偿滚动位置，保持视口不变
    $(window).scrollTop($(window).scrollTop() + removedHeight);
}
function addit() {
    var jqueryTextElem = $('<div class="tile" style="height:100px;background-color:' + getRandomColor() + '"></div>');
    $("#inner-wrap").append(jqueryTextElem);
}
function loop() {
    removeit();
    addit();
    window.setTimeout(loop, 1000);
}
// 初始化添加5个元素
for(let i=0; i<5; i++){
    addit();
}
loop();
</script>

额外说明 #

• 使用outerHeight(true)而不是height()，是因为它会包含元素的margin、padding和border，能更准确地计算页面高度的变化量
• 如果你的列表元素高度不固定，这个方案依然有效，因为它会动态获取每个被移除元素的实际高度
• 当用户没有滚动页面（scrollTop为0）时，调整滚动位置的操作不会产生任何不良影响，因为加0后还是0

内容的提问来源于stack exchange，提问作者Gianluca Ghettini