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

如果有人能够指出我怎么能让divs一个接一个地滚动而不重叠那将是很好的。或者，如果有一个垂直工作而不是水平工作的插件，那么它也可以工作 - 我对垂直滚动的所有搜索都返回无限的分页脚本。

Answer 1

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

我没有使用div，而是使用了一个删除了默认样式的列表，并创建了一个自动收录功能，只需每隔5秒就将列表项向上滑动一次 - 效果不是连续滚动但是它会滑动新闻项目向上，暂停以便阅读然后继续：

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

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

Fiddle

Answer 2

如果您已经在考虑调整第一个代码，可以这样做。

$(document).ready(function() {
	
  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();
    	$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>

Answer 3

更改以下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与顶部的距离，因为它们没有固定的高度。要设置正确的顶部，您必须考虑每个div的实际高度，这就是您必须将行更改为i += $(this).height();的原因。

如果需要，您可以添加一个上瘾的固定数量的像素，以在div之间添加一些空格：i += $(this).height() + 10;。

滚动新闻Feed会重叠div

3 个答案: