Bildlaufleisten im Ionic-Modus in Ionic 6 gestalten: Eine Schritt-für-Schritt-Anleitung

Question

ion-modal verfügt über eine Standard-Bildlaufleiste, die angezeigt wird, wenn der Inhalt überläuft. Ich möchte die Bildlaufleiste formatieren.

Ich kann die Bildlaufleiste in der App mit ::-webkit-scrollbar, ::-webkit-scrollbar-track und ::-webkit-scrollbar-thumb gestalten, aber im Modalmodus scheint es nicht zu funktionieren. Ich habe versucht, diese Elemente auf mehrere Komponenten innerhalb des Modals anzuwenden, z. B. ion-content::-webkit-scrollbar, aber es funktioniert nicht.

Answer 1

下面是在 Ionic 6 中设置离子模式内滚动条样式的一般方法。

1. 将离子模式内容包裹在里面

如下所示的标签

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

2. 然后在全局 css 文件中添加滚动条的以下 css

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

您的滚动在 ion-modal 中将如下所示