CODEWITHSUNDEEP
javascriptscrollscrollbar
KaMZaTa
KaMZaTa

Reputation: 741

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?

Upvotes: 0

Views: 80

Answers (2)

KaMZaTa
KaMZaTa

Reputation: 741

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 })

Upvotes: 1

Sergei Ukolov
Sergei Ukolov

Reputation: 9

There are.

$('body').on('scroll mousewheel touchmove', function(e) {
  // Get the current page scroll position 
  let scrollTop =  
    window.pageYOffset || document.documentElement.scrollTop; 
  let scrollLeft =  
    window.pageXOffset || document.documentElement.scrollLeft, 

    // if any scroll is attempted, 
    // set this to the previous value 
    window.onscroll = function() { 
    window.scrollTo(scrollLeft, scrollTop); 
  }; 
});

Upvotes: 0

Related Questions