title: Scrollbar appears next to sliding-menu
body: <p>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: </p>
  
  <pre><code>    &lt;style&gt;
      ::-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); 
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Is there any way to remove that?</p>
  
  <p>Here's a screenshot to show you what i'm talking about: </p>
  
  <p><a href="https://i.stack.imgur.com/mWEZG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mWEZG.png" alt="enter image description here"></a></p>
  
  <p>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.
  <a href="https://i.stack.imgur.com/YOH8T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YOH8T.png" alt="enter image description here"></a></p>
  
  <p>Index.html looks like this : </p>
  
  <pre><code>&lt;ons-sliding-menu main-page="navigator.html" menu-page="menu.html" side="right" max-slide-distance="250px" var="menu"&gt;
  &lt;/ons-sliding-menu&gt;
  
  &lt;ons-template id="menu.html"&gt;
      &lt;ons-page ng-controller="menuController" ng-init="initMenu()"&gt;
        &lt;ons-list&gt;
          &lt;ons-list-item modifier="tappable" onclick="menu.setMainPage('navigator.html', {closeMenu: true})"&gt;
            &lt;ons-icon icon="ion-home" style="padding-bottom:2px;"&gt;&lt;/ons-icon&gt;  Home
          &lt;/ons-list-item&gt;
          &lt;ons-list-item modifier="tappable" onclick="menu.setMainPage('Page1.html', {closeMenu: true})"&gt;
            &lt;ons-icon icon="ion-clipboard" style="padding-bottom:2px;"&gt;&lt;/ons-icon&gt;  Page1
          &lt;/ons-list-item&gt;
          &lt;ons-list-item modifier="tappable" onclick="menu.setMainPage('Page2.html', {closeMenu: true})"&gt;
            &lt;ons-icon icon="ion-loop" style="padding-bottom:2px;"&gt;&lt;/ons-icon&gt;  Page2
          &lt;/ons-list-item&gt;
        &lt;/ons-list&gt;
    &lt;/ons-page&gt;
  &lt;/ons-template&gt;
  
  &lt;ons-template id="navigator.html"&gt;
      &lt;ons-navigator title="Navigator" var="myNavigator" page="main.html"&gt;        
      &lt;/ons-navigator&gt;
  &lt;/ons-template&gt;
  
  &lt;ons-template id="main.html"&gt;
          &lt;ons-page id="main" &gt;
              &lt;ons-tabbar&gt;
                  &lt;ons-tab active="true" page="page_1.html"&gt;
                      &lt;div class="tab"&gt;
                          &lt;ons-icon icon="ion-calendar" class="tab-icon"&gt;&lt;/ons-icon&gt;
                          &lt;div class="tab-label"&gt;Page_1&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/ons-tab&gt;
                  &lt;ons-tab page="settings.html"&gt;
                      &lt;div class="tab"&gt;
                          &lt;ons-icon icon="ion-gear-a" class="tab-icon"&gt;&lt;/ons-icon&gt;
                          &lt;div class="tab-label"&gt;Settings&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/ons-tab&gt;
              &lt;/ons-tabbar&gt;
          &lt;/ons-page&gt;
  &lt;/ons-template&gt;
  </code></pre>