Loading only visible part of a DOM, and remove DOM elements which are not visible in viewport

I am creating an application where new content gets loaded in a div (using AJAX) as the scrolls down, which allows user to read the whole content in continuous mode (without navigation). But, the problem is, since the whole content is very huge continuous scrolling incrementally loading the whole content into DOM, making the browser really slow.

Is it possible using javascript/jQuery, to remove the DOM elements 开发者_如何学Cwhich are not visible in viewport, and load it back when the user scrolls up?

I'd suggest that if the page loading is becoming very slow, that you use a different method of loading and displaying your content.

Either that or rework what content you are displaying.

The reason this works on Facebook and Twitter is because the content being loaded is very 'light' (i.e. just a few pieces of text and some small images).

This is very much possible.

Ex: (paste this into your browser console on this page to show the effect)

$(window).scroll(function () { 
    var threshold = 0; // how many pixels past the viewport an element has to be to be removed.
    $('.answer').each(function () { 
        if($(this).offset().top + $(this).height() + threshold < $(window).scrollTop()) {       
            $(this).remove() 
        } 
    });
    // handle loading scroll up the same way you're adding new content as you scroll down. 
});