带有 Electron 应用程序的 IONIC 4 离子内容内滚动滚动条颜色/主题

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

但是，这并没有产生任何影响，我仍然得到相同的默认窗口/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