Styler les barres de défilement en mode Ionic dans Ionic 6 : un guide étape par étape

Question

ion-modal a une barre de défilement par défaut qui apparaît si le contenu déborde. Je veux styliser la barre de défilement.

Je peux styliser la barre de défilement dans l'application en utilisant ::-webkit-scrollbar, ::-webkit-scrollbar-track et ::-webkit-scrollbar-thumb, mais cela ne semble pas fonctionner en modal. J'ai essayé d'appliquer ces éléments à plusieurs composants à l'intérieur du modal, tels que ion-content::-webkit-scrollbar, mais cela ne fonctionne pas.

Answer 1

Voici la manière générale de styliser les barres de défilement en mode Ionic dans Ionic 6.

1. Enveloppez le contenu du mode ionique à l'intérieur

Tag comme indiqué ci-dessous

<ion-content>
    //modal content goes here
</ion-content>

2. Ensuite, ajoutez le CSS suivant pour la barre de défilement dans le fichier CSS global

   ion-content {
        --offset-bottom: auto !important;
        --overflow: auto;
        background: var(--ion-toolbar-background, var(--ion-background-color, 
                     #000000)) !important;
        overflow: auto;
   
    &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
   
    &::-webkit-scrollbar-track {
        background: rgb(0, 0, 0);
    }
   
    &::-webkit-scrollbar-track:hover {
        background: #35d703;
    }
   
    &::-webkit-scrollbar-thumb {
        background: rgb(75, 75, 75);
    }
   
     &::-webkit-scrollbar-thumb:hover {
         background: #94173a
     }
   
     .inner-scroll {
         scrollbar-width: thin;
     }
   }

Votre défilement ressemblera à ceci en ion-modal