Question

我在视图中有一个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问题，但它也显示了＆＃34;外部＆＃34;滚动条到整个页面始终存在。

有没有办法删除它？

这是一个屏幕截图，向您展示我正在谈论的内容：

您可以看到，滚动条与主页面相关联，因为在下面的屏幕截图中，我将滑动菜单向左滑动，滚动条与主页面相关联。

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>

Answer 1

看起来身体内容占用了更多空间并导致外部滚动条。

您可以尝试这样做以避免外部滚动条 -

body {
    overflow-y: hidden;
}

Answer 2

我猜你正在使用Onsen 1，因为这些问题不应该出现在Onsen 2中。除了升级之外，你可以做@Nitesh建议的事情 - 只需写{{1在你不想拥有滚动条的元素上。

诀窍是这些滚动条可能不是来自身体，但更有可能来自overflow: hidden。这些页面插入ons-page并将您的内容放在那里。所以你可以试试像

这样的东西

.page__content

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

.page__content {
  overflow: auto;
}

如果这没有帮助，您应该能够在浏览器中调试问题。 #main > .page__content { overflow: hidden; }您可以找到具有滚动条的特定元素。

另一种方法是默认情况下不更改滚动条的样式，只是在需要滚动条的任何地方使用right click -> inspect element标记。

滚动条显示在滑动菜单旁边

2 个答案: