Simplebar: Option to prevent scroll/sweep propagation to parent

[artaommahe]

First example from http://grsmto.github.io/simplebar/, continue to scroll after container content end and event will be cached by body cause to scroll entire page.

[Grsmto]

As far as I know this is the normal behaviour of any scrolling div with overflow: auto; so it's not SimpleBar responsibility to do this.

[wintercounter]

Why not? You're describing that this is the default behavior in browsers. The request is to prevent this default behavior, which can only be solved from SimpleBar. Also it's a pretty common thing.

[Grsmto]

What I meant is that you can do it yourself. Simplebar is suppose to help you to change the look of the scrollbar, not change his behaviour.
If you want to do it yourself, you can access the scroll event, it's describe in the doc. Then you'll probably need to prevent using preventDefault() at the right time but I never did it so I don't know.

[wintercounter]

Sounds reasonable.

In case someone needs it, I post here the solution, since it's not that easy. Scroll events cannot be prevented, but mousewheel can be.

let scrollEl = simpleBar.getScrollElement();
let preventBodyScroll = false;

window.addEventListener('mousewheel', ev => {
    const { scrollHeight, scrollTop, offsetHeight } = scrollEl;
    const { wheelDelta } = ev;

    if (preventBodyScroll) {
        if (
            (wheelDelta < 0 && scrollHeight === scrollTop + offsetHeight) // Down
            || (wheelDelta >= 0 && scrollTop === 0) // Up
        ) {
            ev.preventDefault();
        }
    }
});
scrollEl.addEventListener('mouseenter', () => preventBodyScroll = true);
scrollEl.addEventListener('mouseleave', () => preventBodyScroll = false);

So basically I'm prevent mousewheel down on window when it reached the bottom, and/or up when reached the top.

[Fauzan-Abdullah]

Can u pls help me out with where to paste the wintercounter given code

let scrollEl = simpleBar.getScrollElement();
let preventBodyScroll = false;

window.addEventListener('mousewheel', ev => {
const { scrollHeight, scrollTop, offsetHeight } = scrollEl;
const { wheelDelta } = ev;

if (preventBodyScroll) {
    if (
        (wheelDelta < 0 && scrollHeight === scrollTop + offsetHeight) // Down
        || (wheelDelta >= 0 && scrollTop === 0) // Up
    ) {
        ev.preventDefault();
    }
}

});
scrollEl.addEventListener('mouseenter', () => preventBodyScroll = true);
scrollEl.addEventListener('mouseleave', () => preventBodyScroll = false);

This

[Grsmto]

Another note for people falling here, there is a native css property now supported in modern browsers (except Edge/IE...) named overscroll-behavior: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior