ionic 3.2 - 如何禁用离子含量的滚动？

Question

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

• 我尝试了no-bounce（<ion-content no-bounce>）和disable-scroll（<ion-content disable-scroll>）但仍然内容是滚动
• 我试图将ion-fixed放在content内，并在div正下方的content内。但随后ion-refresher无法正常工作。
• 我尝试了scroll="false"（就像离子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>

andin .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;
}

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