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

Question

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 which are not visible in viewport, and load it back when the user scrolls up?

Answer 1

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).