title: jQuery Mobile Independent scrolling lists
body: <p>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.</p>
  
  <p>I've investigated the following plugin for mobile:</p>
  
  <p>asyraf9.github.com/jquery-mobile/</p>
  
  <p>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.</p>
  
  <p>I was thinking something along the lines of:</p>
  
  <pre><code>&lt;div class="ui-grid-a"&gt;
      &lt;div class="ui-block-a" style="width:50%"&gt;
          &lt;div class="ui-bar ui-bar-e" style="padding-left:5%;float:left;width: 100%; overflow: scroll;"&gt; 
              &lt;ul data-role="listview"&gt;
                  &lt;li&gt;&lt;a href="a.html"&gt;Example A&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="b.html"&gt;Example B&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="c.html"&gt;Example C&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="d.html"&gt;Example D&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;                                                                                           
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="ui-block-b" style="width:50%"&gt;
          &lt;div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 5%; overflow: scroll;"&gt;
              &lt;ul data-role="listview"&gt;
                  &lt;li&gt;&lt;a href="a.html"&gt;Example A&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="b.html"&gt;Example B&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="c.html"&gt;Example C&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="d.html"&gt;Example D&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;                                                                                           
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>Has anyone else come up with a workable solution?</p>
  
  <p>Thanks</p>