Jquery 移动面板中有两个滚动条？

Question

有没有办法消除在我的页面上打开面板时出现的第二个滚动条？当面板的内容超出视口的高度时会出现此问题。

理想情况下，我可以使用页面的原始滚动条在面板中导航，而无需滚动页面内容。很像 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

尝试使用这个 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

Answer 2

我找到了一种使用一些 jquery 代码（不再需要 jquery 移动设备）来执行此操作的方法。单击菜单按钮打开侧面板后，页面内容将添加 html class，使其成为 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.

中可以正常工作

Jquery 移动面板中有两个滚动条？

Two scrollbars in Jquery mobile panel?

mobile

jquery

sidebar

panel

scrollbar