离子 3.2 - 如何禁用离子内容物的滚动

Question

我正在开发一个 Ionic 3.2 版本的应用程序。我在离子卷轴内有一个离子刷新器。我想禁用ion-content的滚动，并希望在滚动ion-list时显示ion-scroll内的ion-refresher。但它失败了。

• 我尝试了no-bounce(<ion-content no-bounce>(和disable-scroll(<ion-content disable-scroll>(，但内容仍在滚动
• 我试图把ion-fixed放在content里面，放在content正下方的div里。但是ion-refresher不起作用。
• 我尝试了scroll="false"(就像在 ionic 1.0 中一样(，但仍然滚动

在代码下方;

    <ion-content scroll="false">
    <ion-scroll scrollY="true" style="width: 100% !important;height:30% !important"> 
        <ion-refresher (ionRefresh)="fill_data($event)">
          <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="{{ 'pull_to_refresh' | translate }}" refreshingSpinner="circles"
            refreshingText="{{ 'refreshing' | translate }}">
          </ion-refresher-content>
        </ion-refresher> 
        <ion-list>
          //data filling here
        </ion-list>
      </ion-scroll>
    </ion-content>

请帮帮我...

Answer 1

这就是

我刚才的做法 - 和你@Tony的问题一样

有了这个 SCSS，我的列表会滚动，我可以在它下面有项目：

page-home {
  .scroll-content {
    overflow: hidden;
  }
  ion-list {
    overflow-y: auto;
    max-height: 72vh;
  }
}

我尝试使用离子scroll和其他选项，但现在似乎都不起作用。

Answer 2

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

这对我有用

Answer 3

在

页面的 sass 文件中使用。它对我有用

.scroll-content {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    display: block;
    overflow-x: unset;
    overflow-y: unset;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
    contain: size style layout;
}

Answer 4

覆盖滚动内容、样式

scroll-content {
    overflow-y: auto;
}

我希望它为你工作

Answer 5

<ion-content>
   <ion-grid>
    <ion-row>
      <ion-col>
        <ion-scroll style="width:100%;height:100px" scrollY="true">
           <ion-list scroll="true">
          <ion-item *ngFor="let item of testData">
            <div>{{item}}</div>
          </ion-item>
        </ion-list>
        </ion-scroll>
      </ion-col>
    </ion-row>
  </ion-grid>
  <p>other data</p>
  <ion-list>
    <ion-item>
      1
    </ion-item>
      <ion-item>
      1
    </ion-item>
      <ion-item>
      1
    </ion-item>
  </ion-list>
</ion-content>

安丁.ts文件：

testData = [];

  constructor(public navCtrl: NavController) {
       for(let i =0;i<100;i++){
      this.testData.push(i);
    }
  }

检查这个 plunk

Answer 6

在 'src\app\app.scss' 中尝试以下样式代码

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

Answer 7

您可以使用Safari调试ios Ionic应用程序，在调试时，您可以注意到哪个是有效的。

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

它将禁用离子

内容物的滚动，并禁用离子列表的滚动。

div.scroll-content {
    bottom: 0px !important;                                                   
}

禁用离子内容物的滚动更有效。它只防止离子含量，但防止离子列表

Answer 8

我已经解决了。 这很简单。

ion-content > div.scroll-content {
    overflow: hidden;
}

因此，它将仅适用于离子含量。