[Ionic-framework] 我怎樣才能禁用或隱藏離子2 <ion-content>內的滾動條


Answers

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

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

這將隱藏每個視圖的滾動條,並且當它有內容時也可以滾動。

Question

我有一個包裹在離子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;
}



Ionic2增加了帶下劃線前綴的setScrollDisabled。 所以,如果你想訪問只是使用注射可變的應用程序,並嘗試設置this.app._setScrollDisabled(真)。我希望它能工作。




我正在使用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;
}