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

user_2536333 0
Viewed 21645

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

ionic2 ionic3 ionic-framework cordova
8 Answers

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

this worked for me

user_46291570

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

I have solved it. it's very simple.

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

So it will be applied for only ion-content.

user_105993910
Related