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

Here is the example code in snippet. In this example code animation duration is 100 seconds. It's not allowed to make it 0 or -1. Also this time will be spent between top:0% and top:-170%. I like this speed ( 270%/100s ).

100s should be forever and speed should stay the same(270%/100s).

setInterval(function() {
      $("#list").append("<div id='block'>Content HERE!</div>");
}, 1000);
#list
{
	position: absolute;
	top: 100%;
	-webkit-animation: scroll 100s linear infinite;
	-moz-animation: scroll 100s linear infinite;
	-ms-animation: scroll 100s linear infinite;
	-o-animation: scroll 100s linear infinite;
	animation: scroll 100s linear infinite;
}

/* animation */
@-webkit-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-moz-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-ms-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@-o-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}

@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="list">
</div>

Answers:

Answer

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.