Menggayakan bar skrol dalam mod Ionik dalam Ionic 6: Panduan langkah demi langkah

Question

ion-modal mempunyai bar skrol lalai yang muncul jika kandungan melimpah. Saya mahu menggayakan bar skrol.

Saya boleh menggayakan bar skrol dalam apl menggunakan ::-webkit-scrollbar, ::-webkit-scrollbar-track dan ::-webkit-scrollbar-thumb, tetapi ia nampaknya tidak berfungsi dalam modal. Saya cuba menggunakan elemen ini pada berbilang komponen di dalam modal, seperti ion-content::-webkit-scrollbar, tetapi ia tidak berfungsi.

P粉670107661 · Answer

Berikut ialah cara umum untuk menggayakan bar skrol dalam mod Ionik dalam Ionic 6.

Balut kandungan mod ionik di dalam

Tag seperti di bawah


    //modal content goes here

Kemudian tambah css berikut untuk bar skrol dalam fail css global

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;
  }
}

Tatal anda akan kelihatan seperti ini dalam ion-modal