search

rochal / jQuery-slimScroll

small jQuery plugin that transforms any div into a scrollable area with a nice scrollbar. Demo and more:
http://rocha.la/jQuery-slimScroll
2.23k stars 928 forks source link

Chrome, Unable to preventDefault inside passive event listener due to target being treated as passive, error #316

Closed malikocak closed 4 years ago

malikocak commented 4 years ago

Hi,

On line 325 in chrome browser it gives a warning and doesn't stop the window scrool and error, can you fix it please.

rsimonton commented 4 years ago

I just spent some time looking at this. Long story short, this was introduced when Chrome (and others) decided to have event listeners for mousewheel events be passive by default.

See here: https://www.chromestatus.com/features/6662647093133312 See here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners

This is a problem though, because passive event listeners cannot call event.preventDefault(), which is what slimScroll uses to prevent page scroll (line 336, here) From the MDN docs for addEventListener's options argument:

passive: A Boolean which, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. See Improving scrolling performance with passive listeners to learn more.

So, when Chrome did that it broke slimScroll. Fortunately (for me anyway) we can fix it by changing line 393 & 394 from this:

target.addEventListener('DOMMouseScroll', _onWheel, false );
target.addEventListener('mousewheel', _onWheel, false );

to this:

target.addEventListener('DOMMouseScroll', _onWheel, { capture: false, passive: false } );
target.addEventListener('mousewheel', _onWheel, { capture: false, passive: false } );

This explicitly forces the handlers to be non-passive, and from there slimScroll is able to call preventDefault() as it needs to (the capture: false part is simply retaining the value of false specified by slimScroll's original 3rd argument to addEventListener).

Disclaimer: I have not tested this extensively, nor have I explored how to do this with attachEvent (which slimScroll falls back to if addEventListener isn't available) because it's not standards-compliant and I simply don't need to support it.

Because this project appears to have been abandoned I'm not going to bother with a pull request.

malikocak commented 4 years ago

Thank you so much, corrected.