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