滚动新闻Feed重叠div

Question

我想添加一个滚动的新闻提要到我已经建立的一个小应用程序，但所有脚本或插件我迄今为止看到的一直是水平滚动 - 而我想滚动垂直。

我碰到了一个问题，这个小提琴http://jsfiddle.net/rNXs9/1/，这对我很好。我会加载每个新闻项到一个div，然后让它滚动。

我试图实现这一点，但DIV重叠并变得不可读。在这里看到我的小提琴，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

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

我没有使用divs，而是使用了一个删除了默认样式的列表，并创建了一个ticker函数，该函数只是每5秒钟将列表项向上滑动一次 - 效果不是连续滚动，而是向上滑动消息，暂停它被读取，然后继续上：

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

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

Fiddle

Answer 2

更改以下jQuery函数：

$(document).ready(function() { 
var i = 0; 

$("#verticalScroller > div").each(function() { 
     $(this).css("top", i); 
     i += $(this).height(); // CHANGE THIS 
     window.verticalScroller($(this)); 
    }); 
}); 

结果：jsfiddle

当您为每个DIV机顶盒，你不知道从上他们每个人的距离，因为他们有不是固定的高度。要设置正确的顶部，您必须考虑每个div的真实高度，这就是为什么您必须将线条更改为i += $(this).height();。

如果你愿意，你可以添加一个虚拟的像素点，在divs之间添加一些空格：​​。

Answer 3

如果您已经在寻找适应你的第一个代码，你可以这样来做。

$(document).ready(function() { 
 
\t 
 
    var i = 0; 
 
    var totalHeight = 0; 
 
    $("#verticalScroller > div").each(function() { 
 
    $(this).css("top", i); 
 
    i += $(this).height(); 
 
    totalHeight = totalHeight + $(this).height(); 
 
    }); 
 
    
 
    var loop = setInterval(function(){ verticalScroller() }, 2000); 
 
    
 
    var index = 0; 
 
    function verticalScroller() { 
 
    var $currentChild = $("#verticalScroller > div").eq(index); 
 
    var scroll = $currentChild.height(); 
 
    
 
    $("#verticalScroller > div").animate({ top: "-="+scroll }, 600, function() { 
 
     var top = totalHeight - $currentChild.height(); 
 
    \t $currentChild.css({ top : top}); 
 
    }); 
 
    
 
    if(index == $("#verticalScroller > div").length-1) index = 0; 
 
    else index++; 
 
    } 
 
    
 
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="verticalScroller"> 
 
<div> 
 
Nude cyclist Nick Lowe identified as mystery rider in leopard G-string 
 
<br> 
 
A nude cyclist who caused a thong and dance in Marlborough has been exposed &acirc;&#128;&#147; he&#039;s Lower Hutt naturist Nick Lowe. 
 
</div> 
 
<div> 
 
Josh Hazlewood pleads guilty to dissent after appeal rejected 
 
<br> 
 
Australian pace bowler Josh Hazlewood has pleaded guilty to dissent after reacting angrily when Black Cap Kane Williamson survived a contentious appeal and DRS review in the second test at Hagley Oval. 
 
</div> 
 
<div> 
 
Firefighters attending increasing number of non-fire related and bizarre callouts 
 
<br> 
 
Rescuing ducklings stuck in drains, requests to fill water tanks and helping fellow firefighters&#039; pet cockatoos - it&#039;s all part of the job for the fire service these days. 
 
</div> 
 
<div> 
 
Mike Hosking gives his two cents on parenting 
 
<br> 
 
Mike Hosking thinks Kiwi teenagers have an &quot;inflated sense of entitlement.&quot; 
 
</div> 
 
<div> 
 
Australia cruising towards series victory after Black Caps&#039; fight not enough 
 
<br> 
 
It&#039;s free entry at Hagley Oval and sadly too familiar for New Zealand against Australia on the final day of the test cricket summer. 
 
</div> 
 
<div> 
 
Big fire strikes near Melbourne 
 
<br> 
 
A major bushfire is burning in the Melbourne area, with emergency services telling some residents it&#039;s too late to flee. 
 
</div> 
 
<div> 
 
Smalltown GP offers $400k job and a slice of the business after struggling to recruit 
 
<br> 
 
A smalltown rural GP in the North Island is offering $400,000 to a junior doctor after a fruitless two-year search for staff. 
 
</div> 
 
<div> 
 
Auckland Zoo&#039;s baby red pandas give warm fuzzies at weigh-in 
 
<br> 
 
Baby red panda twins at Auckland Zoo in Western Springs have had their first weigh-in and are cuter than ever. 
 
</div> 
 
<div> 
 
Max Key reads ruthless messages directed at him 
 
<br> 
 
Max Key read out a list of mean social media posts with a smile on his face, even though he was the butt of every joke. 
 
</div> 
 
</div>