How can I change the color of scroll ion-content?

user_17470884 0
Viewed 578

I am looking for a way to change the color of this scroll to green color, which belongs to ion-content, in Ionic. Do you know how I can do it?

enter image description here

Here is mi 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>
ionic-framework typescript css html
2 Answers

Try the directive below it's based off the package https://www.npmjs.com/package/ion-custom-scrollbar but just grabbed the directive instead

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
        // }
      }`
        }
    }

}
user_118631100
user_159477680
Related