Scrollbar doesn't work if page was scrolled with native scrollbar

[andrei-varchanka]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/ngx-scrollbar

Steps to reproduce:

1. Reduce window height so native scrollbar appears
2. When scroll offset of the page is 0, ngx-scrollbar works fine
3. Scroll the page and try to scroll the content inside ngx-scrollbar using scrollbar

Expected Behavior

working scrollbar

Actual Behavior

content is not scrolling. (it can be scrolled only using mouse wheel but i want a working scrollbar)

Environment

• Angular:
• ngx-scrollbar:
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): any

https://media.giphy.com/media/kG2SL1UGEjYoLxtYJm/giphy.gif

[andrei-varchanka]

Hey @MurhafSousli did you start investigating? take a look please

[MurhafSousli]

@andrei-varchanka I couldn't replicate this in the the demo, could it be caused by the stackblitz env because it is wrapped in an iframe? can you reproduce it in the demo? https://ngx-scrollbar.netlify.com/

[andrei-varchanka]

@MurhafSousli https://ngx-scrollbar.netlify.com/ doesn't use native scroll for the page so i moved out the content from ngx-scrollbar to demonstrate

HwVideoEditor_2021_01_18_154636.mp4

[MurhafSousli]

It seems that there is a problem with the mouse pointer position before dragging the scrollbar at that point..

A good starting point is to look at the dragging methods in https://github.com/MurhafSousli/ngx-scrollbar/blob/master/projects/ngx-scrollbar/src/lib/scrollbar/thumb/thumb.ts#L86

Help is apperciated!

[andrei-varchanka]

@MurhafSousli i found the fix, commit it please

[andrei-varchanka]

Current: return this.clientRect.top;
Expected: return this.clientRect.top + window.pageYOffset;

[MurhafSousli]

@andrei-varchanka Thank you very much!