JavaScript - 如何从上到下滚动 li 元素

Question

我编写了一个脚本，它自动允许从下到上滚动 li 元素。这是我的script在 jsbin 上。

我正在尝试实现现在从上到下滚动项目的相反效果，但到目前为止尚未成功。 Here这是我到目前为止所尝试过的。

有人可以在这方面帮助我吗？提前致谢。

<小时/>

JavaScript 代码:

$('#scroller').bind('touchmove',function(e){
      e.preventDefault();
      // Write code to scroll the items
      alert("Touch move occured");

});


function run() {
  /*  
    var prev = $("#scroller li:first-child");
    $.unique(prev).each(function(i) {
      $(this).delay(i*10).slideDown(function() {
        $(this).appendTo(this.parentNode).slideDown();
      });
    });
  */
  $("#scroller li:last").slideUp(function() {
        $(this).remove();
        $("#scroller").prepend($(this));
        $(this).slideDown();
    });
}

window.setInterval(run, 100);

相关 HTML:

    <div id="wrapper">
        <div id="panels">
            <div  id="scroller">
                <ul>
                                      <li> Barley Wine </li>
                                      <li> Bitter Ale </li>
                                      <li> Brown Ale </li>
                                      <li> India Pale Ale </li>
                                      <li> Pale Ale </li>
                                      <li>list 1</li> 
                                      <li>list 2</li>
                                      <li>list 3</li>
                                      <li>list 4</li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

您在前面加上 <li>元素到<div>而不是 <ul> 。只需将“scroller”id 移至 <ul>而且它变得更好了。