web-dev-qa-db-fra.com

Ionic 4: comment masquer ScrollBar dans le contenu ionique

Im essayant de cacher la barre de défilement dans le contenu ionique (Ionic 4), il n'y a pas de défilement ionique sur ionic 4 donc j'ai utilisé le contenu ionique mais je ne trouve aucun attribut css pour cachez-le (la plupart ne fonctionnent pas)

Je veux faire défiler mais je ne veux pas voir la barre de défilement

::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}

Je l'ai essayé mais cela ne fonctionne pas en contenu ionique .. merci beaucoup.

htmlcssangularionic-frameworkionic4
8
Roishuk

Dans Ionic 4, vous devez utiliser ce qui suit, car Ionic utilisez le DOM fantôme:

global.scss

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

et en page

<ion-content class="no-scroll">
4
Rostislav
::-webkit-scrollbar, *::-webkit-scrollbar {
  display: none;
  overflow: hidden;
}

ion-content {
  overflow: hidden;
  --overflow: hidden;
}

.scroll-content {
  overflow: hidden;
}
  ion-infinite-scroll.md.infinite-scroll-enabled.hydrated {
      overflow: scroll!important;
      height: 100%!important;
    }
3
chetan chumble

Merci @rostislav

Votre solution n'est même pas suggérée par WebStorm et dessine un soulignement jaune dans le sens d'un avertissement, mais travaillez pour moi et travaillez, c'est génial :)

solution: ajoutez ces lignes aux deux global.scss et variables.scss:


::-webkit-scrollbar, *::-webkit-scrollbar {
  display: none;
  overflow: hidden;
}

ion-content {
  overflow: hidden;
  --overflow: hidden;
}

.scroll-content {
  overflow: hidden;
}

NOTIC: puis effacez le cache du navigateur et actualisez la page, c'est génial!

mais n'oubliez pas que le défilement est désactivé dans toutes les pages, ajoutez ce code à seulement .sccs fichier de pages qui ne nécessitent pas de défilement!

1
ali houshyaripour

En raison de Ionic utiliser le shadow DOM pour le contenu ionique, devrait désactiver le défilement dans l'élément sur le DOM shadow et ensuite faire du contenu ionique son propre défilement, puis masquer la barre de défilement pour le contenu ionique. Le résultat est contenu ionique avec la barre de défilement de travail cachée. Besoin d'utiliser Propriétés personnalisées CSS . Ajouter des styles à la portée globale.

ion-content {
  // overwrite inline styles
  --offset-bottom: auto!important;
  --overflow: hidden;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
1
Sergey Oleynikov

Voici un hack? https://github.com/ionic-team/ionic/issues/17685

<ion-content>
<div style="background-color: #f2f2f2 !important; height: 100vh; overflow: auto;">
# content here
</div>
</ion-content>
0
Mark