Полоса прокрутки появляется рядом с скользящим меню

Question

У меня есть список ons (в основном список), на мой взгляд, что я хочу иметь полосу прокрутки, поэтому я добавил некоторый css в свой index.html, а именно следующий:

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

Это помогает справиться с проблемой scollbar для списка on-list, но также отображает «внешнюю» полосу прокрутки на всю страницу, которая всегда присутствует.

Есть ли способ удалить это?

Вот скриншот, чтобы показать вам, что я говорю:

Вы можете увидеть, что полоса прокрутки привязана к главной странице, потому что в следующем скриншоте, я раздвижными влево-влево-влево, а полоса прокрутки привязана к главной странице.

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, так как эти вопросы не должны присутствовать в онсэн 2. Помимо обновления вы можете сделайте то, что предложил @Nitesh - просто напишите overflow: hidden о элементах, которые вы не хотите иметь полосу прокрутки.

Фокус в том, что эти полосы прокрутки, вероятно, не происходят из тела, но, скорее всего, из ons-page. Эти страницы вставляют .page__content и размещают там ваш контент. Таким образом, вы можете попробовать что-то вроде

.page__content { 
    overflow: auto; 
} 

Или, если вы уверены, что тот, который вы не хотите, приходит с главной страницы вы могли бы сделать что-то вроде:

#main > .page__content { 
    overflow: hidden; 
} 

Если Безразлично» t помочь вам уметь отлаживать проблему в браузере. right click -> inspect element, и вы можете найти конкретный элемент с полосой прокрутки.

Альтернативой может быть не изменение стилей полос прокрутки по умолчанию, а просто использование тега ons-scrollbar везде, где вы хотите полосу прокрутки.