滚动条出现在滑动菜单旁边

Posted 2023-03-07

【中文标题】滚动条出现在滑动菜单旁边

【英文标题】：Scrollbar appears next to sliding-menu

【发布时间】：2016-06-07 12:34:15

【问题描述】：

我的视图中有一个我想要滚动条的ons-list（基本上是一个列表），所以我在我的index.html中添加了一些css，即以下一个：

    <style>
    ::-webkit-scrollbar 
        display: block !important;
        width: 5px;
        height: 0px;
    

    ::-webkit-scrollbar-track 
        background: rgba(0,0,0,0.1);
    

    ::-webkit-scrollbar-thumb 
        border-radius: 2px;
        background: rgba(0,0,0,0.3);
        -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); 
    
</style>

这有助于解决 ons-list 的 scollbar 问题，但它也会向始终存在的整个页面显示一个“外部”滚动条。

有什么办法可以去掉吗？

这是一个屏幕截图，向您展示我在说什么：

您可以看到，滚动条与主页相关联，因为在以下屏幕截图中，我将 ons-sliding-menu 向左滑动，并且滚动条与主页相关联。

Index.html 看起来像这样：

<ons-sliding-menu main-page="navigator.html" menu-page="menu.html" side="right" max-slide-distance="250px" var="menu">
</ons-sliding-menu>

<ons-template id="menu.html">
    <ons-page ng-controller="menuController" ng-init="initMenu()">
      <ons-list>
        <ons-list-item modifier="tappable" onclick="menu.setMainPage('navigator.html', closeMenu: true)">
          <ons-icon icon="ion-home" style="padding-bottom:2px;"></ons-icon>  Home
        </ons-list-item>
        <ons-list-item modifier="tappable" onclick="menu.setMainPage('Page1.html', closeMenu: true)">
          <ons-icon icon="ion-clipboard" style="padding-bottom:2px;"></ons-icon>  Page1
        </ons-list-item>
        <ons-list-item modifier="tappable" onclick="menu.setMainPage('Page2.html', closeMenu: true)">
          <ons-icon icon="ion-loop" style="padding-bottom:2px;"></ons-icon>  Page2
        </ons-list-item>
      </ons-list>
  </ons-page>
</ons-template>

<ons-template id="navigator.html">
    <ons-navigator title="Navigator" var="myNavigator" page="main.html">        
    </ons-navigator>
</ons-template>

<ons-template id="main.html">
        <ons-page id="main" >
            <ons-tabbar>
                <ons-tab active="true" page="page_1.html">
                    <div class="tab">
                        <ons-icon icon="ion-calendar" class="tab-icon"></ons-icon>
                        <div class="tab-label">Page_1</div>
                    </div>
                </ons-tab>
                <ons-tab page="settings.html">
                    <div class="tab">
                        <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
                        <div class="tab-label">Settings</div>
                    </div>
                </ons-tab>
            </ons-tabbar>
        </ons-page>
</ons-template>

【参考方案1】：

似乎正文内容占用了更多空间并导致外部滚动条。

你可以试试这个避免外滚动条-

body 
    overflow-y: hidden;

【讨论】：

感谢您的回复，但正文修复没有帮助。我添加了一个新的屏幕截图，显示当我向左滑动页面时，为了引入滑动菜单，滚动条不再在正文上，而是在主页上。

【参考方案2】：

我猜您正在使用 Onsen 1，因为 Onsen 2 中不应该出现这些问题。除了升级之外，您还可以执行@Nitesh 建议的操作 - 只需在您不使用的元素上写上 overflow: hidden '不想有滚动条。

诀窍是这些滚动条可能不是来自正文，而更有可能来自ons-page。这些页面插入.page__content 并将您的内容放在那里。所以你可以尝试类似

.page__content 
  overflow: auto;

或者，如果您确定不想要的内容来自主页，您可以执行以下操作：

#main > .page__content 
  overflow: hidden;

如果这没有帮助，您应该能够在浏览器中调试问题。 right click -> inspect element 可以找到有滚动条的具体元素。

另一种方法是默认情况下不更改滚动条的样式，而只是在需要滚动条的任何地方使用ons-scrollbar 标签。