javascript - 滚动新闻提要与 div 重叠

Question

我想将滚动新闻提要添加到我构建的小型应用程序中，但是到目前为止我看到的所有脚本或插件都是用于水平滚动的 - 而我想要垂直滚动。

我用这个 fiddle 遇到了一个问题，http://jsfiddle.net/rNXs9/1/ ，这对我来说很管用。我会将每个新闻元素加载到一个 div 中，然后让它滚动。

我试图实现这个，但是 DIV 重叠并且变得不可读。在这里看我的 fiddle ，https://jsfiddle.net/wgyxo8gv/ .

我对 JS 或 CSS 不是很精通，所以我不太确定是什么导致了这种情况发生以及如何解决它。

这是滚动元素的 JS:

window.verticalScroller = function($elem) {
    var top = parseInt($elem.css("top"));
    var temp = -1 * $('#verticalScroller > div').height();
    if(top < temp) {
        top = $('#verticalScroller').height()
        $elem.css("top", top);
    }
    $elem.animate({ top: (parseInt(top)-60) }, 600, function () {
      window.verticalScroller($(this))
    });
}


$(document).ready(function() {
    var i = 0;
    $("#verticalScroller > div").each(function () {
          $(this).css("top", i);
          i += 60;
          window.verticalScroller($(this));
    });
});

以及每个 DIV 的 CSS:

#verticalScroller {
    position: absolute;
    width:400px;
    height: 500px;
    border: 1px solid red;
    overflow: hidden;
}

#verticalScroller > div{
    position:absolute;
    width:380px;
    padding-left:10px;
    height:auto;
    border: dotted white;
    overflow:hidden;
}

如果有人能指出我如何让​​ div 一个接一个地滚动而不重叠，那就太好了。或者，如果有一个插件可以垂直工作而不是水平工作，那么它也可以工作——我对垂直滚动的所有搜索都会返回无穷无尽的分页脚本。

Answer 1

我从一个稍微不同的 Angular 来解决这个问题。

我没有使用 div，而是使用了一个删除了默认样式的列表，并创建了一个代码功能，该功能只是每 5 秒将列表项向上滑动一个 - 效果不是很连续滚动，但它会向上滑动一个新闻项，暂停以供阅读，然后继续:

function tick(){
    $('#ticker li:first').slideUp( function ()
    (this).appendTo($('#ticker')).slideDown(); });
}

$(document).ready(function() {
  setInterval(function(){ tick() }, 5000);
});

Fiddle