javascript - 内容更改时去抖动 html 文档高度

Question

假设视口为 100×100 (width × height)，文档为空，滚动位置为 (0,0) (x,y)。

1. body.appendChild大小为 100×200 的元素 A
2. 现在手动滚动到 (0,100)
3. 一些 javascript 现在删除了 A 和body.appendChilds B (100×50)
4. 浏览器检测到文档总高度为 50 并滚动回 (0,0)
5. 一段时间过去了（~150ms）
6. 一些 javascript 删除 B 和body.appendChilds C （再次 100×200）

现在浏览器仍然在 0,0 处滚动。我正在寻找一个解决方案/库/jQueryPlugin（我必须在 3 和 6 处插入任何内容）以防止（4）发生自定义定义的阈值（在本例中为 ~150 毫秒）。

Answer 1

当元素的高度发生变化时，这个小提琴会阻止滚动条 500 秒

$(document).on('click', function(e) {
    var elementClone = $('.element').clone();
    var currentHeight = $('.element').height();
    var currentWinHeight = $(document).height();

    $('body, html').css({
        height: currentHeight
    });

    $('.element').remove();
    var randomHeight = Math.random() * 1000;
    elementClone.css({
        height: randomHeight
    }).text('height: ' + randomHeight).appendTo('body');
    window.setTimeout( function() {
        $('body, html').css({
            height: 'auto' 
        });
    }, 500)
    e.preventDefault();
});