web-dev-qa-db-fra.com

Ionic 2 <contenu ionique> désactiver le défilement

J'ai essayé plusieurs méthodes pour désactiver le défilement, notamment l'utilisation de CSS position: fixed, de l'attribut overflow-scroll="false", etc., mais toutes les méthodes ont échoué. 

Lorsque je glisse vers le bas, les boutons montent et pendant que je glisse vers le haut, les boutons descendent, comme un effet de rebond.

Puis-je connaître des solutions à ce problème? Merci beaucoup.

scrollionic2
24
Reo Lim

Testé avec ionic 3 (devrait fonctionner sur ionic 2):

<ion-content no-bounce></ion-content>
36
OriolJ

J'ai résolu le même problème en utilisant CSS. (Ionıc 3.6)

Step1 : Dans ion-content ajouter une nouvelle classe:

<ion-content class="no-scroll">

Step2 : Dans votre CSS, ajoutez le code ci-dessous:

.no-scroll .scroll-content{
    overflow: hidden;
}
17
A.Çetin

Le contenu ionique a une classe appelée ' scroll-content '.

Dans cet esprit, allez dans votre app.css , dans le src/app et ajoutez:

app.css :

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

Cela devrait laisser votre contenu ion sans aucun parchemin, mais je préférerais que l'utilisateur:

app.css :

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

puisque cela n'autorise le contenu de défilement que si le contenu de la page déborde du contenu des ions.

7
Caio Crespo

Pour désactiver le défilement dans ion-content, vous pouvez utiliser la méthode setScrollDisabled (). Vous devez suivre les étapes ci-dessous.

Dans hello.ts

 import { app } from 'ionic-angular';

   public class HelloPage
   {
       constructor(private app: App) {};

        ngAfterViewInit(){
        this.app.setScrollDisabled(true);
      }
    }
2
nahoang

Si vous ne voulez pas le défilement, vous n'avez peut-être pas besoin du contenu des ions lui-même, par exemple, dans mon statut, je veux utiliser directement la grille d'ions.

<!-- my-page.ts >
<ion-header>.......</ion-header>
<ion-grid class="has-header fixed-content">

</ion-grid>

et j'ai ajouté quelques scss pour la classe has-header:

ion-app {
    &.md {
        .has-header {
            margin-top: $toolbar-md-height;
        }
    }
    &.wp {
        .has-header {
            margin-top: $toolbar-wp-height;
        }
    }
    &.ios {
        .has-header {
            margin-top: $toolbar-ios-height;
        }
    }
}
1
Eymen Elkum

Comme iflagri a posté dans ce numéro et @shaneparsons indiqués dans les commentaires, en utilisant

<ion-content padding>
  <div ion-fixed>

    Your content here...

  </div>
</ion-content>

Résoudre le problème.

J'espère que ça aide!

1
Rodrigo Chaves

Étonnamment, l'attribut no-bounce a fonctionné sur mon projet précédent et ne fonctionne pas sur un nouveau projet sur lequel je travaille actuellement.

J'ai essayé la solution de @ rodrigo-chave avec ion-fixed. Cela résout le problème de défilement, mais rend mon contenu petit (comme si on faisait un zoom arrière). L'ajout de propriétés CSS en largeur et en hauteur à 100% l'a corrigé.

<ion-content no-bounce>
  <div ion-fixed style="height: 100%; width: 100%">
    ...
  </div>
</ion-content>
0
Uzbekjon