Jqueryモバイルパネルに2つのスクロールバーがありますか？

Question

ページ上のパネルを開くときに表示される2番目のスクロールバーを削除する方法はありますか？この問題は、パネルの内容がビューポートの高さを延長するときに表示されます。

理想的には、ページの内容をスクロールすることなく、ページの元のスクロールバーを使用してパネルをナビゲートすることができます。応答モードの場合はREI webiste と大変よく似ています。

私のfiddleです。

CSS：

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

はHTML：

<div data-role="page"> 
    <div data-role="panel" id="sidebar" data-position="right" data-display="push"> 
    <a href="#" data-rel="close">Close panel</a> 
<p> 1995<br>1996<br>1997<br>1998<br>2000<br>2001<br>2002<br>2003<br>2004<br>2005<br>2006<br>2007<br>2008<br>2009<br>2010<br>2011<br>2012<br>2013<br>2014<br>2015<br>2016<br>2017</p> 
    </div> 
    <div><a href="#sidebar">Menu</a> 
    </div> 

    <div data-role="content"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
</div> 

Answer 1

だ私はjqueryのコード（もうjquerymobileの必要がない）のビットを使ってこれを行う方法を発見しました。メニューボタンをクリックしてサイドパネルを開くと、サイドバーが固定位置にあり、スクロールしている間に、100vhとoverflow:hiddenになるページのコンテンツにhtmlクラスが追加されます。

はここfiddle.

新しいコードです：

$('#open').click(function(){ 
if($('#B').width() > 0){ 
$('#B').animate({width: '0px'}), 
$(".container").removeClass("no-scroll").animate({right: '200px'}); 
} 
else{ 
$('#B').animate({width: '200px'}), 
$(".container").addClass("no-scroll").animate({right: '200px'}); 
} 
}); 

$('#close').click(function(){ 
$('#B').animate({width:"0px"}), 
$(".container").removeClass("no-scroll").animate({right: '0px'}); 
}); 


.no-scroll{ 
    height:100vh !important; 
    overflow: hidden !important; 
} 

それが最もエレガントなソリューションだ場合、私はわからないんだけど、FirefoxとChromeで必要に応じて、それが働いています。

Answer 2

このoverflow: noneを使用してみてください。 2番目のスクロールバーが消え、class="whole"を追加してheight: 100%とし、コンテンツのスクロールバーが内容にのみ変化するようにします。

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

 
.whole{ 
 
    height: 100%; 
 
}

<div class="whole" data-role="page"> 
 
    <div data-role="panel" id="sidebar" data-position="right" data-display="push"> 
 
    <a href="#" data-rel="close">Close panel</a> 
 
<p> 1995<br>1996<br>1997<br>1998<br>2000<br>2001<br>2002<br>2003<br>2004<br>2005<br>2006<br>2007<br>2008<br>2009<br>2010<br>2011<br>2012<br>2013<br>2014<br>2015<br>2016<br>2017</p> 
 
    </div> 
 
    <div><a href="#sidebar">Menu</a> 
 
    </div> 
 
    
 
    <div data-role="content"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
    </div> 
 
</div>

、ここfiddle