jQuery Mobile Independent scrolling lists

Question

I'm creating a Mobile Web Application using the jQueryMobile framework that requires 2 lists to be shown to the user side by side. The catch here is that I would like to have the lists move independent of one another so the user can pick and item from the left hand list, and another from the right hand list without scrolling both lists at the same time.

I've investigated the following plugin for mobile:

asyraf9.github.com/jquery-mobile/

which is a great solution, but it is more menu/page centric, and I would like to have both elements to be lists within a single page.

I was thinking something along the lines of:

<div class="ui-grid-a">
    <div class="ui-block-a" style="width:50%">
        <div class="ui-bar ui-bar-e" style="padding-left:5%;float:left;width: 100%; overflow: scroll;"> 
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
    <div class="ui-block-b" style="width:50%">
        <div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 5%; overflow: scroll;">
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
</div>    

Has anyone else come up with a workable solution?

Thanks

Answer 1

Take a look at iScoll 4; it may not be jQuery, but it is a great JavaScript plugin for Mobile Scrolling.

You would add an ID to each UL and attach a scroll to each one separately like this:

With your example you would be something along these lines:

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
    var scroller_1;
    var scroller_2;
    function loaded() {
        scroller_1 = new iScroll('ul-1');
        scroller_2 = new iScroll('ul-2');
    }
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

I hope this helps!