如何在Ionic 6中设置离子模态内的滚动条样式?

y1aodyip  于 2023-04-03  发布在  Ionic
关注(0)|答案(1)|浏览(169)

ion-modal有一个默认的滚动条,如果内容溢出,它就会出现。我想设置滚动条的样式。
我可以用::-webkit-scrollbar,::-webkit-scrollbar-track和::-webkit-scrollbar-thumb来设置应用程序中的滚动条样式,但在modal中似乎不起作用。我尝试将这些元素应用到modal中的几个组件,如ion-content::-webkit-scrollbar,但它不起作用。

nhhxz33t

nhhxz33t1#

下面是你可以在Ionic 6中的离子模态中设置滚动条样式的一般方法。
1.把你的离子模态内容包在里面
离子含量
标签如下所示

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

1.然后在全局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;
  }
}

您的滚动将看起来像下面的离子模态

相关问题