There is the following code:

$sdvig = $(document).height() - $(window).height(); $scroll = $(window).scrollTop(); if ($scroll == $sdvig) { $page = +$page + 20; if($n==0){ $('.container').append('<div id="two"></div>'); $('#two').load('loader.php?page='+$page+'&load=0'); $('#tree').remove(); } if($n==1){ $('.container').append('<div id="tree"></div>'); $('#tree').load('loader.php?page='+$page+'&load=0'); $('#one').remove(); } if($n==2){ $('.container').append('<div id="one"></div>'); $('#one').load('loader.php?page='+$page+'&load=0'); $('#two').remove(); $n=-1; } $n=$n+1; }

He's like a worker. When scrolling reaches the bottom of the page - a block is added, the info is loaded into it and the top three of them is deleted. The trouble is that at the moment of deletion the scrolling jumps (because of this, the machine reaches the bottom of the page and the next item is executed), but you need to achieve a smooth operation. The code itself, in principle, can not be read, the question is the following - is it possible to somehow remove blocks from the DOM without breaking the scroll?

  • transition did not try to put? - HELO WORD
  • And why should they recreate each time? Why not just swap them? - Regent
  • It is not necessary to remove them. They can be moved and replaced with information using the CSS transform: translate3d - zhenyab
  • zhenyab, you can still do it like a merry-go-round) - HELO WORD
  • in essence the merry-go-round and it turns out - zhenyab

1 answer 1

Diva .one , .two , .three position absolutely. Set the .container fixed height (initially equal to the sum of the heights of the divs) with overflow:none . When scrolling, remove one of the divs, add a new one to the end and increase the height of the container.