在 Ionic 6 中設定離子模式內捲軸的樣式：逐步指南

Question

ion-modal 有一個預設的捲軸，如果內容溢位就會出現。我想設定滾動條的樣式。

我可以使用 ::-webkit-scrollbar、::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 在應用程式中設定捲軸樣式，但它似乎無法在模態中運作。我嘗試將這些元素應用到模式內的多個元件，例如 ion-content::-webkit-scrollbar，但它不起作用。

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 中將如下所示