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%，以便内容的滚动条仅对内容有所不同。

＆＃13;

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

＆＃13;

<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>

＆＃13;

这里是fiddle

Answer 2

我找到了一种方法来使用一些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中按预期工作。

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

2 个答案: