web-dev-qa-db-fra.com

Comment désactiver ou masquer la barre de défilement au sein d'un Ionic 2 <contenu ionique>

J'ai une application Angular 2 enveloppée dans Ionic 2. J'utilise <ion-tabs>, Et dans chaque onglet se trouve un <ion-content>. Le contenu de cette zone doit pouvoir défiler, mais Ionic 2 ajoute une barre de défilement que je ne souhaite pas afficher. Il semble que, une fois compilé, un <ion-content> Se voit injecter un <scroll-content>. Je ne veux pas ce comportement.

J'ai essayé plusieurs des solutions qui tilisées fonctionnent dans Ionic 1, mais elles ne fonctionnent pas dans Ionic 2:

  • Paramétrer scroll="false" Sur le <ion-content>
  • Paramétrer scrollbar-y="false" Sur le <ion-content>
  • Paramétrer overflow-scroll="false" Sur le <ion-content>

  • Définir les éléments suivants en css:

    .scroll-bar-indicator { display: none; }

etc...

Définir ce qui suit fonctionne effectivement pour supprimer la barre de défilement, mais je préférerais ne pas détourner le comportement du navigateur, mais cela supprime également les barres de défilement du contenu interne de la balise <ion-content>, Ce que je ne souhaite pas.

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}
ionic-frameworkangularionic2
28
vaer-k

Ils ont une classe pour ça et devraient pouvoir utiliser:

 import { App } from 'ionic-angular';

 constructor(private app: App) {
   app.setScrollDisabled(true);
};

Voir le forum de discussion ici . Mais il semble avoir cessé de fonctionner après 2.0.0-rc.1 Je crois que les thats sont liés à this dans leur [~ # ~] changelog [~ # ~] quand ils ont changé beaucoup d'attributs en classes (c'est-à-dire scroll-content en .scroll-content ]) et la app.setScrollDisabled(true); n'a pas été mise à jour pour refléter certains de ces changements.

Si vous utilisez 2.0.0-rc.2 ou 2.0.0-rc.3 Je ne crois pas que <ion-content overflow-scroll="false"> Ou <ion-content ion-fixed> Fonctionnera aussi bien à partir de maintenant, créez votre propre classe.

Donc, si vous êtes sur 2.0.0-rc.2 ou 2.0.0-rc.3 vous devriez pouvoir le faire en ajoutant ceci à votre .scss

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

et ajoutez cette classe à votre ion-content comme ceci

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

Alors maintenant, gardez un œil ouvert pour que cela soit corrigé sur les versions ultérieures à 2.0.0-rc.3 .

UPDATE (2.0.0-rc.6): On dirait qu'ils ont créé la fonction App modules setDisableScroll privée (comme vu ici )

Voici également une liste complète des fonctions disponibles pour le module App par version:

  • 2.0.0-rc.1 (a setScrollDisabled )

  • 2.0.0-rc.2 (a setScrollDisabled )

  • 2.0.0-rc. (a setScrollDisabled )

  • 2.0.0-rc.4 (no setScrollDisabled et aucune alternative)

  • 2.0.0-rc.5 (toujours pas setScrollDisabled ou alternative)

  • 2.0.0-rc.6 (no setScrollDisabled , et aucune alternative, mais ils ont beaucoup plus de fonctions d'affichage telles que viewWillUnload)

Donc, à moins qu'ils ne le rapportent, continuez à utiliser ce qui suit:

.no-scroll .scroll-content {débordement: masqué; }

De plus, je suis une ventouse pour les points Internet, alors n'hésitez pas, si vous trouvez cela utile.

43
garrettmac

Dans ionic2, j'ai vu overflow-y est configuré pour défiler par défaut. Dans votre fichier src/app/app.scss, essayez ceci:

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

Cela masquera la barre de défilement de chaque vue et permettra également le défilement quand il aura du contenu.

19
jewelfarazi

Vous pouvez remplacer le style de contenu de défilement dans votre .scss fichier.

// scroll-content is a class
.scroll-content {
    overflow-y: auto;
}

ou mieux encore, vous pouvez définir overflow-y: hidden;

7
Nii

J'utilise Ionic 2 rc 0

Ma solution consiste à utiliser un attribut ion-fixed sur un div que j'ai appelé enveloppe.

(dans rc 0, vous ne pouvez pas ajouter d'ions fixés à la teneur en ions)

<ion-content>
  <div id='envelope' ion-fixed>
  </div>
</ionic-content>

#envelope{
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
3
Siyu

Si vous souhaitez simplement masquer la barre de défilement sans vouloir désactiver le défilement, utilisez no-bounce attr:

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

merci à larssn pour son commentaire

Mais si vous ne voulez pas le défilement , vous n'aurez peut-être pas besoin du contenu ionique lui-même, dans mon statut, par exemple, je souhaite utiliser le grille d'ions directement.

<!-- 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;
        }
    }
}
3
Eymen Elkum

Ajouter ceci dans config.xml fonctionne pour moi.

<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
2
Saurabh Chauhan

Ionic2 a ajouté setScrollDisabled avec le préfixe de soulignement. Donc, si vous souhaitez accéder, utilisez simplement l'application de la variable injectable et essayez de définir le this.app._setScrollDisabled (true). J'espère que cela fonctionnera.

1
Sachin Mishra

Ajoutez ce css dans vos styles,

J'ai extrait cette classe de l'élément inspect qui contient la barre de défilement et les éléments

ion-scroll.scroll-y .scroll-content::-webkit-scrollbar{
  display: none;
}

a travaillé pour moi

0
Vivek Chaugule