尝试使用这个overflow: none。它会使第二个滚动条消失，同时添加另一个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

我发现了一种使用一些jquery代码来实现这一点的方法（不再需要jquerymobile）。一旦单击菜单按钮打开侧面板，一个html类就会添加到页面的内容中，使其成为100vh和overflow:hidden，而侧边栏则处于固定位置并滚动。
这里是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中工作正常。