CODEWITHSUNDEEP
cordovaionic-frameworkionic2ionic3
Tony
Tony

Reputation: 123

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

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.

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

Upvotes: 6

Views: 22117

Answers (8)

lucky418
lucky418

Reputation: 31

I have solved it. it's very simple.

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

So it will be applied for only ion-content.

Upvotes: 0

Alex
Alex

Reputation: 11

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

Upvotes: 1

Jin Kai
Jin Kai

Reputation: 11

You can debug ios Ionic app using Safari, while debugging you can notice which is efficient.

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

It will disable scrolling of ion-content and also disable scrolling of ion-list.

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

It is more efficient to disable scrolling of ion-content. It prevents only ion-content but ion-list

Upvotes: 0

Zhang Bruce
Zhang Bruce

Reputation: 914

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

this worked for me

Upvotes: 2

oh3vci
oh3vci

Reputation: 72

Try below style code in your 'src\app\app.scss'

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

Upvotes: 0

Evan Shortiss
Evan Shortiss

Reputation: 1658

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.

Upvotes: 3

varun aaruru
varun aaruru

Reputation: 2940

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

testData = [];

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

check this plunk

Upvotes: 0

Nakul Kundaliya
Nakul Kundaliya

Reputation: 542

Override the scroll-content, style

scroll-content {
    overflow-y: auto;
}

i hope its work for you

Upvotes: 0

Related Questions