title: Scroll JQuery Mobile Panel Separately From Content
body: <p>I'm working on an HTML 5 mobile app using JQuery Mobile. The design calls for a sidebar menu that can scroll independently of the main content, so for example you could scroll somewhere on the page, open the menu and scroll within that menu without the page contents scrolling.</p>
  
  <p>To implement the menu, JQuery Mobile slide panels were an obvious choice. However, I haven't been able to get them to scroll separately from the content.</p>
  
  <p>I've tried using iScroll 4 with and without the <a href="https://github.com/watusi/jquery-mobile-iscrollview">iScrollView</a> plugin to scroll a JQuery Mobile slide panel, but the scrolling does not work in the panel, only on elements in the page content. The panel's contents can be pushed and pulled, but will snap back to its starting position (the "rubber band" effect).</p>
  
  <p>I've also tried using <a href="http://teamddm.com/articles/jscroll-an-iscroll-plugin-for-jquery">jScroll</a> to target the div that is created by JQuery mobile (".ui-panel-inner"), but that had the same results.</p>
  
  <p>Calling <code>refresh()</code> on the iScroll object after showing the panel also did not work.</p>
  
  <p>I'm about to forget about using the built in JQuery Mobile slide panels in order to make this work, does anyone know of a solution to scroll a JQuery Mobile panel independently from the content div?</p>