Scrollbar appears next to sliding-menu

Question

I have an ons-list(basically a list) in my view that I want to have a scrollbar, so I added some css to my index.html, namely the following one:

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

This helps with the scollbar problem for the ons-list, but it also shows an "external" scrollbar to the whole page that is always there.

Is there any way to remove that?

Here's a screenshot to show you what i'm talking about:

You can see, that the scrollbar is tied to the main page, because in the following screenshot, I'm sliding the ons-sliding-menu to the left, and the scrollbar is tied to the main page.

Index.html looks like this :

<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

I'm guessing you're using Onsen 1, since these issues shouldn't be present in Onsen 2. Apart from upgrading you can do the thing which @Nitesh suggested - just write overflow: hidden on the elements which you don't want to have a scrollbar.

The trick is that these scrollbars probably don't come from the body, but more likely from ons-page. Those pages insert a .page__content and put your content there. So you could try something like

.page__content {
  overflow: auto;
}

Or if you're sure that the one which you don't want comes from the main page you could do something like:

#main > .page__content {
  overflow: hidden;
}

If that doesn't help you should be able to debug the problem in a browser. right click -> inspect element and you can find the specific element which has the scrollbar.

An alternative would be not to change the styles of the scrollbars by default, but just to use the ons-scrollbar tag wherever you want a scrollbar.

Answer 2

It seems the body content is taking more space and resulting in the outer scroll bar.

You can try this to avoid the outer scroll bar -

body {
    overflow-y: hidden;
}