Scrollbar jumps after Dragging manually with mouse

OverlayScrollbar works as expected until you use the mouse to drag the scrollbar, after which it starts jumping on each mouse move.

Version: 1.4.1 (1.4.4 does not work with AMD) Options:

 {
          scrollbars: {
                autoHide: 'leave',
                autoHideDelay: 300
          }
}

Browser: Chrome, Firefox

I use the Plain Javascript version. Here is a demo of the problem:

[KingSora]

Phu, I’m glad this fix worked.

Alright let me explain:

In the code, I’m initializing the events for the scrollbars in a method called initScrollbarInteractivity. The dragging of the scrollbar handle-element works like this:

1. A mousedown event on the handle-element registers a mouse “click” with the left button
2. Then a mousemove event gets applied to the document-element, so you can actually move the mouse around the whole page to drag the scrollbar handle. Simultaneously a mouseup event gets applied to the document-element. The purpose of this event is to reset this whole secenario (remove the mousemove event from the document-element and so on)

For the mousemove and mouseup events I’ve used passive event listeners. Passive event listeners are relatively new. Unfortunately (and I really don’t know why) these listeners can’t be removed from the document-element in some cases. You also don’t have the possibility to check whether the removal was successful or not. So the bug was caused because the mousemove event was still applied to the document-element although it should be removed.

I’ve tested it on different elements and it seems like the document-element is the only element which reacts in this way. On the body, html or other elements the removal of the listeners is working always without any problems (since I’m using them on other elements too). Since this bug is happening under very special conditions (it’s happening on your page but not on mine and so on), I’m still thinking this is a browser bug, but since I can’t really identify what is causing it, I also can’t report it.

So what was the fix? - The fix was to use normal events instead of passive events on the document-element. Probably youre asking yourself now whether the performance is now worse than it was with passive events. The answer is a simple no, because I used the passive events only because I thought the performance could be better with them.

Passive events also don’t really affect mouse events since they are intended to be used on touch events. But why did I use them on mouse events at all? - Because in my code I’ve grouped mouse and the corresponding touch events to reduce the code size (you can check the variables: _strMouseTouchDownEvent, _strMouseTouchUpEvent and _strMouseTouchMoveEvent). Since passive events gets only applied if the event “allows” and is suited for it, they doesn’t have any negative side effects, so why not.

Some browsers such as Google Chrome are marking all touch events on the document-element as passive events by default, so in the best case the browser will make the events as fast as possible automatically.

I hope I could give you some insight and it is now more clear why this behavior was also very strange for me.

[KingSora]

Verison 1.4.5 with the fix is now released!