在 Ionic 6 中设置离子模式内滚动条的样式：分步指南-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

在 Ionic 6 中设置离子模式内滚动条的样式：分步指南

P粉547362845 2024-01-04 20:51:07

[CSS3讨论组]

988

ion-modal 有一个默认的滚动条，如果内容溢出就会出现。我想设置滚动条的样式。

我可以使用 ::-webkit-scrollbar、::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 在应用程序中设置滚动条样式，但它似乎无法在模态中工作。我尝试将这些元素应用到模式内的多个组件，例如 ion-content::-webkit-scrollbar，但它不起作用。

P粉547362845

全部回复(1)

P粉6701076612024-01-05 09:42:15 1楼

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

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

如下所示的标签

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

然后在全局 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 中将如下所示

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>