Skip to content
Advertisement

How to block the page scrolling without affecting the style?

I’d like to block the page scrolling but without change my page style (e.g. using overflow: hidden;).

I tried to use this:

$('body').on('scroll mousewheel touchmove', function(e) {
    e.preventDefault()
    e.stopPropagation()
    return false
});

but but the scrolling didn’t blocked and I received this console error:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

Any solutions?

Advertisement

Answer

I found out the right way to disable the scrolling:

function preventScroll(e) {
   e.preventDefault()
}

document.addEventListener('wheel', preventScroll, { passive: false })

In order to allow it again:

document.removeEventListener('wheel', preventScroll, { passive: false })
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement