html - 如何更改滚动 ionic 内容的颜色？

Question

我正在寻找一种方法将此卷轴的颜色更改为绿色，该颜色属于 Ionic 中的 ion-content。你知道我该怎么做吗？

这是我的 HTML

    <ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button id="h" defaultHref="home" ></ion-back-button>
    </ion-buttons>
    <ion-title>Validación de apartado 1º...</ion-title>
    <ion-icon slot="end" name="search-outline"></ion-icon>
  </ion-toolbar>
  <ion-text>Realizadas 74 de 200</ion-text>
</ion-header>

<ion-content >
  <ion-progress-bar value="0.37"></ion-progress-bar>
  <ion-list lines="full">
    <ion-item *ngFor="let item of items; let i = index">
      <ion-label>{{item + " - index: " + i}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

Answer 1

尝试下面的指令，它基于包 https://www.npmjs.com/package/ion-custom-scrollbar但只是捕获了指令

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
    selector: '[scrollbar]'
})
export class ScrollbarDirective implements OnInit {

    @Input() scrollbar: string
    @Input() allowAllScreens: boolean | string

    hostElement: HTMLElement

    constructor(public elementRef: ElementRef) { }

    ngOnInit() {
        this.hostElement = this.elementRef.nativeElement
        if (this.hostElement && this.hostElement.tagName && this.hostElement.tagName == 'ION-CONTENT') {
            let el = document.createElement('style')
            el.innerText = this.scrollbar || this.getCustomStyle()
            this.hostElement.shadowRoot.appendChild(el)
        }
    }

    getCustomStyle() {
        if (this.allowAllScreens === true || this.allowAllScreens === 'true') {
            return `::-webkit-scrollbar {
           width: 1rem !important;
        }
        ::-webkit-scrollbar-track {
          background: #23232e;
        }
        ::-webkit-scrollbar-thumb {
           background: #df49a6;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: #ff7eef;
        }
        // ::-webkit-scrollbar-track:hover {
        //   background: #f7f7f7;
        // }

        // .inner-scroll {
        //   scrollbar-width: thin
        // }
        `
        } else {
            return `@media(pointer: fine) {
        ::-webkit-scrollbar {
           width: 1rem !important;
        }
        ::-webkit-scrollbar-track {
          background: #23232e;
        }
        ::-webkit-scrollbar-thumb {
           background: #df49a6;
        }
        ::-webkit-scrollbar-thumb:hover {
          background: #ff7eef;
        }
        // ::-webkit-scrollbar-track:hover {
        //   background: #f7f7f7;
        // }
        // .inner-scroll {
        //   scrollbar-width: thin
        // }
      }`
        }
    }

}