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

Question

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

理想情况下，我可以使用页面的原始滚动条来导航面板，而无需滚动页面的内容。很像 REI 网站 在响应模式下。

这是我的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 代码（不再需要 jquerymobile）。单击菜单按钮打开侧面板后，一个 html 类将添加到页面内容中，使其成为

100vh

和

overflow:hidden

，同时侧边栏处于固定位置并滚动。

这是小提琴。

新代码：

$('#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 中按预期工作。