Apply class while scrollbar is hovered

[Ash66hub]

What are you trying to do?

Trying to apply a set of style properties while the scrollbar is hovered (mouseenter)

What troubleshooting steps have you tried?

renderer: Renderer2;
const scrollbarClass = this.elementRef.nativeElement.querySelector('scrollbar');
        if (scrollbarClass) {
            this.renderer.listen(scrollbarClass, 'mouseenter', () => {
                console.log('Mouse entered scrollbar!');
                this.isScrollActive = true;
            });
        }

and using ngClass to apply the css class (using less css)

[ngClass]="{
       'scroll-active': isScrollActive
}"

Environment

• Angular: 15
• ngx-scrollbar: 10.0.1
• Browser(s): Chrome
• Operating System: Windows

[MurhafSousli]

At the moment there is no output or stream to notify you when it is hovered, but you can check if it is hovered through a reference to the scrollbar component and ngAfterViewChecked

@ViewChild(NgScrollbar): scrollbar: NgScrollbar;

ngAfterViewChecked() {
  console.log(this.scrollbar.state.horizontalHovered, this.scrollbar.state.verticalHovered);
}

https://stackblitz.com/edit/ngx-scrollbar-edvd7l?file=src%2Fapp%2Fhome%2Fhome.component.ts

[Ash66hub]

Works, thank you very much!!