Attempting to scroll over sidebar causes entire page scroll

[dmi-dmi-dmi]

Hi

I have added a sidebar to my page with scrollLock: true option but its behavior is weird.

Expected behavior:

1. Whenever I try to scroll with mouse over sidebar its content is scrolled if it can be scrolled. Body content is not scrolled.
2. Whenever I try to scroll over dimmer nothing happens

This behavior can be seen, for example, with modal windows

Actual behavior:
https://user-images.githubusercontent.com/19564404/179535133-7d92d722-3f76-4637-852d-2661245173d0.mp4

Codepen with the page from video
https://codepen.io/cobbycobby/pen/oNqZgBb

I suppose I did something wrong. Can someone help me with fixing markup/js?

[lubber-de]

The scrollLock feature needs to be refactored, as it uses the DOMMouseScroll Event, which is only supported in Firefox as of https://caniuse.com/?search=dommouse (and even running your code in Firefox does not prevent scrolling anyway), so this is nowadays a bug/not working feature. I'll create an issue.

[lubber-de]

In the meantime, as a workaround, you can simply disable overflowing the body when the sidebar is shown so scrolling has no effect anymore (untested, this could have side effects, when your sidebar itself needs to be scrolled)
https://jsfiddle.net/lubber/dpu8gy65/5/

[dmi-dmi-dmi]

Thanks a lot. This seems to solve my problem just fine.

The only thing I changed is using function onHide since it executes the code when sidebar starts to animate out.

onHidden works too but there is a noticeable delay between sidebar disappearance and being able to scroll.

[lubber-de]

Scrolllock feature is now fixed by #2436