Прокрутка новостей накладывается на divs

Question

Я хочу добавить прокручивающийся канал новостей в небольшое приложение, которое я создал, однако все сценарии или плагины, которые я видел до сих пор, были для горизонтальной прокрутки - тогда как я хочу прокрутить вертикально.

Я столкнулся с вопросом с этой скрипкой, http://jsfiddle.net/rNXs9/1/, которая будет хорошо работать для меня. Я бы загрузил каждую новость в div и затем прокрутил ее.

Я попытался реализовать это, но DIVs перекрываются и становятся нечитаемыми. Смотрите мою скрипку здесь, 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)); 
    }); 
}); 

И в CSS для каждого DIV:

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

Если кто-то может указать на то, как я могу просто получить дивы прокручивать одну после другого без перекрытия это было бы здорово. Или, если есть плагин, который работает вертикально, а не горизонтально, что работает, тогда это тоже может работать - все мои поиски вертикальной прокрутки возвращают бесконечные сценарии разбиения на страницы.

Answer 1

Я обошел это, приблизившись к нему с немного другого угла.

Вместо использования divs я использовал список с удаленным стилем по умолчанию и создал функцию тикера, которая просто сдвигала элементы списка вверх один раз в 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: i += $(this).height() + 10;.

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>