JSFiddle - React, Tailwind, and code Playground

by Noir Noir

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div class="scroller">
  
</div>

CSS

.scroller {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid #888;
}

JavaScript

var blocks = [],
		blocksLimit = 4,
    scroller,
    sHeight;

function getText() {
	return  '<p>Начало текстового блока</p>'+
  				'<p>Прололжение текстового блока</p>'+
          '<p>Прололжение текстового блока</p>'+
          '<p>Прололжение текстового блока</p>'+
          '<p>Прололжение текстового блока</p>'+
          '<p>Прололжение текстового блока</p>'+
          '<p>Прололжение текстового блока</p>'+
          '<p>Конец текстового блока</p>'+
          '<p>---</p>';
}

function setText(container, text) {
	var block = $('<div class="block-item">'+text+'</div>').appendTo(container);
  block.attr('data-id', Math.random());
  blocks.push(block);
  
  console.log(block.scrollTop() + ' ' + block.position().top);

  if (blocks.length > blocksLimit) {
    var oldblock = blocks.shift();
    oldblock.remove();
    scroller.scrollTop(block.position().top);
  }
}

$(document).ready(function(){
	scroller = $('.scroller');
  sHeight = scroller.height();
  setText(scroller, getText());
  
  scroller.on('scroll', function(){
  	if ((scroller.scrollTop() + sHeight) >= scroller[0].scrollHeight) {
    	setText(scroller, getText());
    }
  });
  
});