Infinite Auto Scroll With Dynamic Content E.g. Append

Every 5s new content added to page(div). After 15s page start scrolling down with css animation property. What I want is that if there is content it should scroll down till the en

Solution 1:

Try

$(window).on("error", function(e) {
  console.log(e);
  clearInterval(s);
  $("#list").stop(true, true)
});

$.fx.interval = 0;

var i = 0
, listScroll = function listScroll(elem, idx) {
  var block = elem.find("[data-index=" + idx + "]");
  block.animate({
    top: "-=" + (elem.height())                     
  }, (1000 * 100), "linear", function() {
    console.log(this, idx);
    listScroll($(this).parent(), idx)
  });
}

, s = setInterval(function() {
  var el = $("<div />", {
    "data-index": i,
    "html": "Content HERE!",
  });
  $.when($("#list").append(el), i)
  .promise().done([
      listScroll
    , function() {
        ++i;
      }
    ])
}, 1000);

#list {
  position: absolute;
  top: 100%;
  height: calc(100% - 1%);
}
#list div {
  position: relative;
  padding: 6px;
  height: 36px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>
<div id="list">
</div>