javascript - コンテンツ変更時の HTML ドキュメントの高さのデバウンス

Question

ビューポートが 100×100 (幅×高さ)で、ドキュメントが空で、スクロール位置が (0,0) (x,y) であるとします。

1. body.appendChildサイズ 100×200 の要素 A
2. 手動で (0,100) までスクロールします
3. 一部の JavaScript は A と s B を削除するようになりましたbody.appendChild(100×50)
4. ブラウザーは、ドキュメントの高さが合計で 50 であることを検出し、(0,0) にスクロールして戻ります。
5. しばらく時間が経過します (~150ms)
6. 一部の JavaScript は B とbody.appendChilds C を削除します (再び 100×200)

現在、ブラウザはまだ 0,0 でスクロールされています。カスタム定義のしきい値 (この場合は ~150ms) で (4) が発生しないようにするために、ソリューション/ライブラリ/jQueryPlugin (3 と 6 に挿入する必要があるものは何もない) を探しています。

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