How to stop scrolling the previous page?

Question

I am implementing a website and want to stop users go to the previous page when they scroll with two fingers on their touchpad. I tried to add scroll event and stop propagation but it doesn't work.

document.addEventListener('scroll', (e) => {e.stopPropagation()});
document.addEventListener('touchstart', (e) => {e.stopPropagation()});
document.addEventListener('touchend', (e) => {e.stopPropagation()});

Is there any way to solve this issue?

I have tried to disable touch-action in css but it still doesn't work:

touch-action: none;

Possible duplicate of [Disable scrolling when touch moving certain element](https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element) — tao, Jul 27 '18 at 23:01
In short, touch scrolling does not trigger the `scroll` event. It triggers `touchstart` and `thouchend` events. The browser detects events from both fingers, compiles them together and determines behavior. — tao, Jul 27 '18 at 23:03

score 0 · Answer 1 · answered Jul 29 '18 at 00:15

I use below code to solve the issue:

export const disableScroll = () => {
    windowOnweel = window.onwheel;
    window.onwheel = e => {
        e = e || window.event;
        if (e.preventDefault) e.preventDefault();
        e.returnValue = false;
    }; 
};

but you need to remember to restore the onwheel method when you don't need that.

How to stop scrolling the previous page?

1 Answers1