Debounce html document height on content change

Question

Assume the viewport is 100×100 (width × height), the document is empty, the scroll position is (0,0) (x,y).

1. body.appendChild an element A of size 100×200
2. Now scroll to (0,100) manually
3. Some javascript now removes A and body.appendChilds B (100×50)
4. The browser detects that the total document height is 50 and scrolls back to (0,0)
5. Some time passes (~150ms)
6. Some javascript removes B and body.appendChilds C (100×200 again)

Now the browser is still scrolled at 0,0. I'm looking for a solution/library/jQueryPlugin (nothing that i have to insert at 3 and 6) to prevent (4) from happening for a custom defined threshold (in this case ~150ms).

Answer 1

this fiddle blocks the scrollbar for 500 seconds when the height of the element changes

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