无限自动滚动动态内容，例如附加

Question

每 5 秒向页面添加新内容（div）。 15 秒后页面开始向下滚动 css 动画属性。

我想要的是，如果有内容，它应该向下滚动到最后。

这是代码片段中的示例代码。在此示例代码中，动画持续时间为 100 秒。不允许将其设为 0 或 -1。此外，这段时间将花费在 top:0% 和 top:-170% 之间。我喜欢这个速度 (270%/100s)。

100s 应该永远存在，速度应该保持不变（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>

Answer 1

尝试

$(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>

无限自动滚动动态内容，例如附加

Infinite auto scroll with dynamic content e.g. append

javascript

css

jquery

animation

scroll