Clever Geek Handbook

Ionic 3.2 - How do I disable lead ionic content?

I am developing an application in Ionic 3.2 version. I have an ion highlight inside an ion scroll. I want to disable scrolling ion-content

and want to show ion-refresher

inside ion-scroll

when scrolling ion-list

. But this fails.

  • I tried no-bounce

    ( <ion-content no-bounce>

    ) and disable-scroll

    ( <ion-content disable-scroll>

    ) but still the content is scrolling
  • I tried to install ion-fixed

    inside content

    and inside div

    just below content

    . But then it ion-refresher

    doesn't work.
  • I tried scroll="false"

    (as in ionic version 1.0) but still looping

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

+3


source to share


6 answers


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

With this SCSS, my list is scrolling and I may have items underneath:



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

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

I've tried using ionic scroll

and other options, but none seem to work right now.

+2


source


Override scroll content, style

scroll-content {
    overflow-y: auto;
}


I hope its work for you

0


source 


<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

0


source


Try to enter style code in your 'src \ app \ app.scss'

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


source 


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


it worked for me

0


source


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

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

It will disable the scrolling of the ionic content and also disable the scrolling of the ionic list.

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

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

0


source






More articles:


All Articles