Skip to content
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

Closed
wmaurer opened this issue Nov 27, 2024 · 4 comments · Fixed by #675
Closed

Bug with visibility="visible" #674

wmaurer opened this issue Nov 27, 2024 · 4 comments · Fixed by #675
Labels

Comments

@wmaurer
Copy link

wmaurer commented Nov 27, 2024

Reproduction

  1. Clone MurhafSousli/ngx-scrollbar, install npm packages.
  2. Edit projects/ngx-scrollbar-demo/src/app/example3/example3.component.html line 4 and add visibility="visible".
  3. 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

  • Angular: 18.2.11
  • ngx-scrollbar: 16.1.0
  • Browser(s): Chrome, Edge, Firefox
  • Operating System: Linux Manjaro Gnome, Windows 11
@wmaurer
Copy link
Author

wmaurer commented Nov 29, 2024

Sorry, I'd thought that adding that one extra property to your own repository would have sufficed as a reproduction.

Here's a Stackblitz:
https://stackblitz.com/~/github.com/wmaurer/ngx-scrollbar-bug

@wmaurer
Copy link
Author

wmaurer commented Nov 29, 2024

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?

@wmaurer
Copy link
Author

wmaurer commented Nov 29, 2024

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

@MurhafSousli
Copy link
Owner

MurhafSousli commented Nov 30, 2024

Thanks for the reproduction. I often receive false issues so this helps me verify the bug.

The issue lays in the following code.

constructor() {
effect(() => {
this.cmp.viewportDimension();
this.cmp.contentDimension();
untracked(() => this.control.trackSize.set(this.size));
});

By default the scrollbar renders only if viewport is scrollable. when visibility=visible is used the track is always shown, means its already rendered even if its not scrollable. which make the effects runs sooner but the track didn't have enough time to evaluate to fit its position in the viewport, so this.size return 0 at the moment, which caused the issue.

Adding requestAnimationFrame fixes the issue.

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.

@MurhafSousli MurhafSousli linked a pull request Nov 30, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants