jquery移動面板滾動內部問題

Question

是否有可能使JqueryMobile面板滾動內部，但其後面的頁面保持靜態？ 我正在嘗試創建一個像Facebook這樣的大菜單，但該頁面始終也會滾動，而不僅僅是面板內的內容。

我想：

<style type="text/css"> 
    #mypanel { 
     overflow: scroll !important; 
    } 
</style> 

<div data-role="page" id="page"> 
    <div class="my-page-big-content">ALL THE CONTENT OF MY PAGE</div> 

<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-position-fixed="true"> 
    <div class="panel-header"> 
     <p>My Panel header<a href="#mypanel" data-rel="close">Close My Panel</a></p> 
    </div> 
    <div class="panel-content"> 
     <ul class="my-menu"> 
      <li><a href=#>Menu item 1</a></li> 
      <li><a href=#>Menu item 1</a></li> 
      <li><a href=#>Menu item 1</a></li> 
      <li><a href=#>Menu item 1</a></li> 
      <li><a href=#>Menu item 1</a></li> 
     <ul> 
    </div> 
</div> 
</div> 
<script> 
    $(document).bind('panelopen', function (e, data) { 
     $('body').css("overflow", "hidden"); 
    }); 

    $(document).bind('panelclose', function (e, data) { 
     $('body').css("overflow", "auto"); 
    }); 
</script> 

Answer 1

沒關係，在android系統wasnt工作，我找到了原因：

https://code.google.com/p/android/issues/detail?id=6864

https://code.google.com/p/android/issues/detail?id=2911

Answer 2

可以設置UI面板的內部類在你的CSS文件中，並把它放在頁面中的JQM css後

.ui-panel-inner { 
    position: absolute; 
    top: 1px; 
    left: 0; 
    right: 0; 
    bottom: 0px; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
} 

此外，還有一個好建議： Make panel and page content scroll independently