IONIC 4 ion-content 内滚动滚动条颜色/主题 w/ Electron 应用程序答案

【问题标题】：IONIC 4 ion-content inner-scroll scrollbar color/theme w/ Electron appIONIC 4 ion-content 内滚动滚动条颜色/主题 w/ Electron 应用程序
【发布时间】：2019-07-10 17:44:05
【问题描述】：

以下是我为滚动条设置主题的尝试：

/* 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 滚动条。

谁能给点建议。

【问题讨论】：

标签： css angular ionic-framework electron ionic4

【解决方案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 {}

将此添加到 app.module

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

<ion-content appScrollbarTheme>

【讨论】：

【解决方案2】：

Ionic GitHub 存储库中有一个未解决的问题，截至目前，它尚未解决（未知可能）：https://github.com/ionic-team/ionic/issues/17685

【讨论】：