-
-
Notifications
You must be signed in to change notification settings - Fork 98
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug with visibility="visible" #674
Comments
Sorry, I'd thought that adding that one extra property to your own repository would have sufficed as a reproduction. Here's a Stackblitz: |
I have the feeling that this is a timing / change detection problem. I have pushed a branch with a not very elegant workaround. See the change-detection branch: https://stackblitz.com/~/github.com/wmaurer/ngx-scrollbar-bug/tree/change-detection In this branch, I have added the following code: export class AppComponent {
private cdr = inject(ChangeDetectorRef);
@ViewChild(NgScrollbar) private scrollbar?: NgScrollbar;
ngOnInit() {
setTimeout(() => {
if (this.scrollbar) {
this.scrollbar.update();
this.cdr.detectChanges();
}
}, 0);
}
} This fixes the problem, but isn't really a sustainable solution for developers using this component. But maybe it gives you a hint as to what fix you could apply in the ng-scrollbar component? |
And last but not least, it seems that, for this simple example (I haven't yet fully tested in more complex scenarios), upgrading to Angular 19 fixes the problem, without the inelegant workaround above: https://stackblitz.com/~/github.com/wmaurer/ngx-scrollbar-bug/tree/angular-19 |
Thanks for the reproduction. I often receive false issues so this helps me verify the bug. The issue lays in the following code. ngx-scrollbar/projects/ngx-scrollbar/src/lib/track/track-adapter.ts Lines 115 to 120 in 379e87e
By default the scrollbar renders only if viewport is scrollable. when Adding In v19, I learned that the effects now sync with change detection, maybe that why it works in v19 but I will add the fix anyway. |
Reproduction
projects/ngx-scrollbar-demo/src/app/example3/example3.component.html
line 4 and addvisibility="visible"
.npm run start
, navigate to home page, look at example 3 (Lorem ipsum). Scroll the vertical scrollbar down.Expected Behavior
The scrollbar thumb should move with the mouse.
Actual Behavior
The scrollbar thumb moves upwards when scrolling down.
Environment
The text was updated successfully, but these errors were encountered: