Question

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

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

以下是代码段中的示例代码。在此示例中，代码动画持续时间为100秒。它不允许使其为0或-1。此时间也将在顶部：0％和顶部：-170％之间。我喜欢这个速度（270％/ 100s）。

100s应该是永远的，速度应该保持不变（270％/ 100s）。

＆＃13;

setInterval(function() {
      $("#list").append("<div id='block'>Content HERE!</div>");
}, 1000);

＆＃13;

#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%; }
}

＆＃13;

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

＆＃13;

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>

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

1 个答案: