Ionic 4: comment masquer ScrollBar dans le contenu ionique

Dans Ionic 4, vous devez utiliser ce qui suit, car Ionic utilise shadow DOM:

global.scss

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

et en page

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

Merci @rostislav

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

solution: ajoutez ces lignes à la fois à global.scss et variables.scss :

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

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

.scroll-content {
  overflow: hidden;
}

REMARQUE: puis vider le cache du navigateur et actualiser la page, c'est génial!

mais n'oubliez pas que le défilement est désactivé dans toutes les pages, ajoutez ce code uniquement .sccs fichier .sccs des pages qui n'ont pas besoin d'être défilées!

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

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

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

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>

Solution @Sergey Oleynikov refactorisée et cela a parfaitement fonctionné pour moi

ion-content {
  // overwrite inline styles
  // --offset-bottom: auto !important; 
  --overflow: hidden;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

Le <ion-content> est un élément personnalisé avec le DOM shadom. Il y a quelque chose appelé le pseudo élément :: part pour cibler un élément dans un élément DOM shadom. Si vous regardez le dom de l'ombre, vous verrez ceci:

Faites attention à la part="scroll" . Ionic a ajouté des parties à leurs éléments que nous pouvons utiliser via le pseudo élément ::part pour cibler ceci et appliquer notre CSS personnalisé pour masquer la barre de défilement:

ion-content::part(scroll)::-webkit-scrollbar {
   display: none;
}

Testé avec succès sur iOS et Android. Je ne parviens pas à le faire fonctionner sur Chrome.

Je crois que vous pouvez utiliser slot="fixed" pour rendre l'élément fixe supprimant ainsi la barre de défilement par défaut pour vous.

Consulter la documentation ionique

Je n'ai pas pu trouver un moyen fiable de le faire en utilisant les méthodes mentionnées précédemment, elles n'ont pas fonctionné ou ont arrêté le défilement tous ensemble. Mon approche était de rendre la fenêtre de contenu ionique plus large que l'écran.

.noscroller {
  left: -10px;
  width: calc(100% + 20px);
}

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

ion-content {
 --offset-bottom: auto!important;
 --overflow: hidden;
 overflow: auto;
 &::-webkit-scrollbar {
   display: none;
 }
 }