jquery mobile 开发之panel随page滚动问题

      最近做项目时，用到jquery mobile中的panel功能，代码如下：

 <div data-role="page" id="list" >
          <div data-role="header">
              <h1>列表</h1>
              <div data-role="navbar" data-grid="c">
                  <ul>
                      <li><a href="#filterpanel">省份</a></li>
                      <li><a href="#">类型</a></li>
                      <li><a href="#">时间</a></li>
                      <li><a href="#">地址</a></li>
                  </ul>
              </div>
          </div>

 </div>

 <div data-role="panel" data-position="right" data-display="overlay" data-theme="b" id="filterpanel">
          <div class="ui-panel-inner">
              <ul data-role="listview" data-inset="false" data-icon="false">
                  <li><a href="#">不限省份</a></li>
                  <li><a href="#">北京</a></li>
                  <li><a href="#">上海</a></li>
                  <li><a href="#">天津</a></li>
                  <li><a href="#">重庆</a></li>
                  <li><a href="#">黑龙江</a></li>
                  <li><a href="#">吉林</a></li>
                  <li><a href="#">辽宁</a></li>
                  <li><a href="#">河北</a></li>
                  <li><a href="#">山西</a></li>
                  <li><a href="#">甘肃</a></li>
                  <li><a href="#">陕西</a></li>
                  <li><a href="#">青海</a></li>
                  <li><a href="#">山东</a></li>
                  <li><a href="#">河南</a></li>
                  <li><a href="#">江苏</a></li>
                  <li><a href="#">安徽</a></li>
                  <li><a href="#">浙江</a></li>
                  <li><a href="#">福建</a></li>
                  <li><a href="#">江西</a></li>
                  <li><a href="#">湖南</a></li>
                  <li><a href="#">湖北</a></li>
                  <li><a href="#">广东</a></li>
                  <li><a href="#">广西</a></li>
                  <li><a href="#">四川</a></li>
                  <li><a href="#">云南</a></li>
                  <li><a href="#">贵州</a></li>
                  <li><a href="#">海南</a></li>
                  <li><a href="#">香港</a></li>
                  <li><a href="#">澳门</a></li>
                  <li><a href="#">台湾</a></li>
                  <li><a href="#">新疆维吾尔自治区</a></li>
                  <li><a href="#">内蒙古自治区</a></li>
                  <li><a href="#">西藏自治区</a></li>
                  <li><a href="#">宁夏回族自治区</a></li>
                  <li><a href="#">广西壮族自治区</a></li>
              </ul>
          </div>
      </div>

       可是当我滚动panel中列表的内容时，主页面也会跟着一起滚动，显然这是不合理的，具体的解决办法为：在css中加入下面设置

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

      其中 WebKit私有的属性“-webkit-overflow -scrolling: touch”（允许独立的滚动区域和触摸回弹）。