Question

I have written a script which automatically allows to scroll the li elements from bottom to top. Here is my script on jsbin.

I am trying to achieve an opposite effect of now scrolling the items from top to bottom, but haven’t been successful so far. Here is what I have tried so far.

Can anybody help me in this regards? Thanks in advance.

---

The JavaScript code:

$('#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);

The relevant 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

You’re prepending the <li> elements to the <div> instead of the <ul>. Just move the “scroller” id to the <ul> and it gets a lot better.