Prevent Mouse Wheel Scrolling, But Not Scrollbar Event. JavaScript

I need to make a webpage scrollable only by scrolling bar. I have tried to find how to catch scroll bar event, but as i see it is impossible. Currently i use this functions: functi

Solution 1:

To prevent window scrolling with mouse wheel.

// Old Method
window.onwheel = function(){ return false; }

EDIT (Jan 2020): As informed by @MatthewMorrone above code to bind wheel event on window, window.document & window.document.body (marked as 'Old Method') is no longer working. For more details please check: https://www.chromestatus.com/features/6662647093133312

As document level Wheel/Mousewheel event listeners are treated as Passive, we need to mark this event listener to be treated as Active. Please check below code for the solution. More about: https://developers.google.com/web/updates/2019/02/scrolling-intervention

// New Working Method
window.addEventListener("wheel", e => e.preventDefault(), { passive:false })

If a content of <div> or other element is scrollable, you can prevent it like this:

document.getElementById('{element-id}').onwheel = function(){ return false; }

Cheers...

Solution 2:

jQuery solution to prevent window scrolling with mouse wheel:

$(window).bind('mousewheel DOMMouseScroll', function(event){ return false});

If you want to prevent scrolling with mouse wheel in a single DOM element, try this:

$('#{element-id}').bind('mousewheel DOMMouseScroll', function (e) { return false; });

The DOMMouseScroll event is used in Firefox, so you have to listen on both.

Solution 3:

I'm currently using this and it works fine. Scrolling using the bar works fine, but mouse wheel won't work.

The reason i'm doing it this way is that I have custom code to scroll the way I want, but if don't add any code it will just don't scroll on wheel.

window.addEventListener('wheel', function(e) {  
    e.preventDefault();
    // add custom scroll code if you want
}