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

Question

假设视口为100×100(宽×高)，文档为空，滚动位置为(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

这个fiddle在元素高度变化时阻塞滚动条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();
});