ionic 3.2 - How to disable scroll of ion-content?

Question

I am developing an app in Ionic 3.2 version. I have a ion-refresher inside ion-scroll. I want to disable scrolling of ion-content and want to show the ion-refresher inside the ion-scroll when scroll the ion-list. But it fails.

• I tried no-bounce (<ion-content no-bounce>) and disable-scroll (<ion-content disable-scroll>) but still content is scrolling
• I tried to put ion-fixed inside content and inside a div just below the content. But then the ion-refresher not working.
• I tried scroll="false" (like in ionic 1.0) but still scrolling

Below the code;

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

Please help me...

Answer 1

This is how I did it just now - same problem as you @Tony

With this SCSS my list scrolls, and I can have items below it:

page-home {
  .scroll-content {
    overflow: hidden;
  }

  ion-list {
    overflow-y: auto;
    max-height: 72vh;
  }
}

I tried using the ionic scroll and other options but none seem to work right now.

Answer 2

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

this worked for me

Answer 3

use in the sass file of the page ..it works for me

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