onwheel-fix
npm install onwheel-fix
Mousewheel fix for certain browsers that just don't get it right Includes:
- fix for Safari 9 & 10:
in Safari 9 & 10 the default event is debounced, therefore broken.
The issue seems to occur due to the eleastic scroll and appeared with Safari 9
which allows eleasic scroll in nested containers.
to fix this issue the
html
and/orbody
element usually has to be set tooverflow: hidden;
. In many cases this comes with drawbacks or breaks other things. Preventing the default event and then applying thedeltaY
to thescrollTop
of the rootNode fixes the issue without other hacks.- Attemt: prevent the mousewheel event and move the rootNode manually.
- Concern: impact on performance?
const mousewheel = 'mousewheel' mousewheelmousewheel
Methods
init(rootNode) -> Boolean
initializes the fix
- rootNode: a DOM node, usually
document.body
but can be any other root element.
destroy() -> Boolean
removes the fix