Replace native scrollbar of third party component's scroll container

[hakimio]

Do you think it could be possible to replace native scrollbar of third party component (for example, ion-content) by using custom directive?
Let's say I get the scroll container's html element, how could I assign it to ngx-scrollbar viewport?

[MurhafSousli]

I don't think so, the scrollable element inside ion-content cannot be targeted with scrollViewport directive

[hakimio]

Thanks, for the answer.
It seems it's possible to dynamically instantiate ng-scrollbar in ion-content shadow root and assign scroll container as projected content using createComponent(), but I couldn't find a way to dynamically instantiate the scrollViewport directive on the scroll container element.

[MurhafSousli]

If you were able to make it work, please share the solution!

[hakimio]

Working solution:

@Directive({
    selector: 'ion-content',
    standalone: true
})
export class CustomScrollbarDirective implements OnInit {

    constructor(
        private readonly elementRef: ElementRef,
        private readonly renderer: Renderer2,
        private readonly environmentInjector: EnvironmentInjector,
        private readonly applicationRef: ApplicationRef
    ) {}

    ngOnInit() {
        setTimeout(() => this.createNgScrollbar(), 200);
    }

    private createNgScrollbar() {
        const hostEl: Element = this.elementRef.nativeElement,
            scrollParent: Element = this.renderer.createElement('div'),
            children = Array.from(hostEl.children);

        for (const child of children) {
            this.renderer.appendChild(scrollParent, child);
        }
        this.renderer.appendChild(hostEl, scrollParent);

        const ngScrollbar = createComponent(NgScrollbar, {
            hostElement: scrollParent,
            environmentInjector: this.environmentInjector,
            projectableNodes: [
                children
            ]
        });
        this.applicationRef.attachView(ngScrollbar.hostView);
    }

}

Anyway, the best solution here might be to just replace ion-content with ng-scrollbar instead of dealing with hacks like this one.