unexpected movement whe you grab object beneath scrollbar

[Xocial42]

Reproduction

https://youtu.be/BiusoHK6KEg

Steps to reproduce:

1. Position your cursor over the scrollbar.
2. Click and hold the left mouse button, then drag the cursor upwards (this will happen even if you move away from the direct path of the scrollbar).
3. Once you've grabbed the object beneath the scrollbar, your cursor will remain attached to the scrollbar while it continues to move.

Expected Behavior

When left mouse button is reeleased the scrollbar should stop moving.

Actual Behavior

The scrollbar never stops moving. Even if you go to another tab and back as you can see on this video. https://youtu.be/f_E94lbG8PA

Environment

• Angular: 15
• ngx-scrollbar: 11.0.0
• Browser(s): Google Chrome
• Operating System: Win 11
• Pointer events method: scrollbar

[MurhafSousli]

I tried many times, but was unable to reproduce it on my end!

[Xocial42]

I tried many times, but was unable to reproduce it on my end!

It's hard to describe, but I'll do my best to explain it.

One way to reproduce it is to highlight both the text inside the scrollable object and the text beneath it. Then, when you attempt to hold and drag the scrollbar in any direction, the issue occurs: https://youtu.be/51Uxqz4WiiE

[ysk3a]

The first comment confused me since you started with this https://watch.whatever.social/watch?v=BiusoHK6KEg which seemed to be the correct behavior. sorry, @Xocial42, your steps and ordering of your wording was confusing. 😆
But after looking at your latest comment, it was more clear. I can also replicate the actual, undesired behavior.

Step-by-step process to reproduce: You have to have your cursor at the end of the word options from Smooth scroll options then drag to highlight the text. Keep on dragging+highlighting text until you cover some of the lorem ipsum dummy lines. Then release the mouse to stop dragging+highlighting. Don't click on anything else after you stop dragging so you keep the highlighted texts. Begin clicking on the scrollbar and then scroll horizontally. You should see the cursor change to 'not-allowed' as well as the 'still highlighted text' to be dragged with the cursor as if its an image.

Then if you were to change tabs or (if you have another monitor) focus on another window, and you come back to the ngx-scroller site and assuming the highlighted text from the previous steps are still highlighted, you are still 'scrolling' even though your cursor isn't near the scrollbar.

[MurhafSousli]

Thanks @ysk3a. I was able to reproduce only when pointerEventsMethod="scrollbar" but it works properly with pointerEventsMethod="viewport"

[Xocial42]

The first comment confused me since you started with this https://watch.whatever.social/watch?v=BiusoHK6KEg which seemed to be the correct behavior. sorry, @Xocial42, your steps and ordering of your wording was confusing. 😆 But after looking at your latest comment, it was more clear. I can also replicate the actual, undesired behavior.

Step-by-step process to reproduce: You have to have your cursor at the end of the word options from Smooth scroll options then drag to highlight the text. Keep on dragging+highlighting text until you cover some of the lorem ipsum dummy lines. Then release the mouse to stop dragging+highlighting. Don't click on anything else after you stop dragging so you keep the highlighted texts. Begin clicking on the scrollbar and then scroll horizontally. You should see the cursor change to 'not-allowed' as well as the 'still highlighted text' to be dragged with the cursor as if its an image.

Then if you were to change tabs or (if you have another monitor) focus on another window, and you come back to the ngx-scroller site and assuming the highlighted text from the previous steps are still highlighted, you are still 'scrolling' even though your cursor isn't near the scrollbar.

NP, I am glad somebody makes it clear 😊 Thank you !

[MurhafSousli]

Fixed in v14