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

Posted 2023-03-06

【中文标题】IONIC 4 ion-content 内滚动滚动条颜色/主题 w/ Electron 应用程序

【英文标题】：IONIC 4 ion-content inner-scroll scrollbar color/theme w/ Electron app

【发布时间】：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 滚动条。

谁能给点建议。

【参考方案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