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

Question

假设视口为100×100 （宽度×高度），文档为空，滚动位置为（0,0）（x，y）。

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

现在浏览器仍然滚动到0,0。我正在寻找一个解决方案/库/ jQueryPlugin（我必须在3和6处插入）以防止（4）发生自定义阈值（在这种情况下〜150ms）。

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();
});