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

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

Solution 2

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

this worked for me

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

Comments

[Tony]

Hi, Thank for your answer. But unfortunately its not solved. Still scrolling. I added like : page-home { scroll-content { overflow-y: auto; } } in the home.scss which is the css of current page. and also added in content( <ion-content class="scroll-content" > ). Tried by adding class and without adding.

[Tony]

Hi, Thank you for the answer. Tried but still not fixing. Do you used ionic 2.0? My version is 3.2. could you try in 3.2 please?

[Tony]

No idea! its still not working here. When I put the ion-list alone and override the scroll-content its not scrolling. but it scrolls again when I add ion-scroll,ion-refresher and ion-list components.

[Tony]

When I put the ion-list alone and override the scroll-content, its not scrolling. but it scrolls again when I add ion-scroll,ion-refresher and ion-list components.

[varun aaruru]

can you make a sample plunker or recreate issue in new project and upload to git

[Stefan Rein]

This code is wrong. It should be hidden instead of auto. With auto you would be able to scroll.