Цветовая / полоса прокрутки с внутренней полосой прокрутки IONIC 4 иона с приложением Electron

Question

Моя попытка прокрутить полосы прокрутки приведена ниже:

/* width */
::-webkit-scrollbar {
  width: 10px !important;
}

/* Track */
::-webkit-scrollbar-track {
  background: #333 !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #111 !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #111 !important;
}

Однако это не оказало никакого влияния, и я по-прежнему получаю те же стандартные полосы прокрутки Windows / Chrome.

Может кто-нибудь, пожалуйста, посоветуйте.

Answer 1

1. создать директиву полосы прокрутки

   import { NgModule, Directive, ElementRef } from '@angular/core';
   @Directive({
     selector: '[appScrollbarTheme]'
   })
   export class ScrollbarThemeDirective {
     constructor(el: ElementRef) {
       const stylesheet = `
         ::-webkit-scrollbar {
         width: 10px;
         }
         ::-webkit-scrollbar-track {
         background: #0f0f0f;
         }
         ::-webkit-scrollbar-thumb {
         border-radius: 1rem;
         background: linear-gradient(var(--ion-color-light-tint), var(--ion-color-light));
         border: 4px solid #020202;
         }
         ::-webkit-scrollbar-thumb:hover {
         }
       `;
   
       const styleElmt = el.nativeElement.shadowRoot.querySelector('style');
   
       if (styleElmt) {
         styleElmt.append(stylesheet);
       } else {
         const barStyle = document.createElement('style');
         barStyle.append(stylesheet);
         el.nativeElement.shadowRoot.appendChild(barStyle);
       }
   
     }
   }
   
   
   @NgModule({
     declarations: [ ScrollbarThemeDirective ],
     exports: [ ScrollbarThemeDirective ]
   })
   export class ScrollbarThemeModule {}
   

2. добавить это в app.module

   import { ScrollbarThemeModule } from './scrollbar-theme.directive'; @NgModule({ imports: [ScrollbarThemeModule] })

3. в вашем html

   <ion-content appScrollbarTheme>

Answer 2

Существует открытая проблема для этого в репозитории Ionic GitHub, на данный момент она не решена (неизвестно, что это возможно): https://github.com/ionic-team/ionic/issues/17685