[Ionic-Framework] 如何在Ionic 2 <ion-content>中禁用或隱藏滾動條



Answers

在ionic2中,我看到overflow-y默認設置為滾動,所以在你的src / app / app.scss文件中試試這個:

.scroll-content {
   overflow-y: auto !important;
}

這將隱藏每個視圖的滾動條,並在內容時啟用滾動。

Question

我有一個用Ionic 2包裹的Angular 2應用程序。我正在使用<ion-tabs> ,每個標籤內都有一個<ion-content> 。 此區域中的內容需要可滾動,但Ionic 2添加了一個我不想顯示的滾動條。 看來,在編譯時, <ion-content>有一個<scroll-content>注入其中。 我不想要這種行為。

我嘗試了許多以前在Ionic 1中工作的解決方案,但它們在Ionic 2中不起作用:

  • <ion-content>上設置scroll="false"
  • <ion-content>上設置scrollbar-y="false"
  • <ion-content>上設置overflow-scroll="false"
  • 在css中設置以下內容:

    .scroll-bar-indicator { display: none; }

等等...

設置以下內容實際上可以刪除滾動條,但我寧願不劫持瀏覽器行為,也會從<ion-content>標記內部的內容中刪除滾動條,這是我不想要的。

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}



在config.xml中添加它對我有用。

<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />



將此CSS添加到您的樣式中,

我從inspect元素中獲取了這個類,其中包含滾動條和項目

ion-scroll.scroll-y .scroll-content::-webkit-scrollbar{
  display: none;
}

為我工作




我正在使用Ionic 2 rc 0

我的解決方案是在div上使用離子固定屬性,稱為信封。

(在rc 0中,你不能添加離子固定的離子含量)

<ion-content>
  <div id='envelope' ion-fixed>
  </div>
</ionic-content>

#envelope{
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}