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

Question

ion-modal有一個預設的滾動條，如果內容溢位就會出現。我想設定滾動條的樣式。我可以使用::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb在應用程式中設定捲軸樣式，但它似乎無法在模態中運作。我嘗試將這些元素應用到模式內的多個元件，例如ion-content::-webkit-scrollbar，但它不

P粉670107661 · Answer

以下是在 Ionic 6 中設定離子模式內滾動條樣式的一般方法。

將離子模式內容包裹在裡面

如下圖所示的標籤


    //modal content goes here

然後在全域 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 中將如下所示