Prevent mouse wheel scrolling, but not scrollbar event. JavaScript

Question

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:

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}
function wheel(e) {
    preventDefault(e);
}
function disable_scroll() {
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = wheel;
}

But they are not very useful in my situation, because they block all scroll events. Do you have any ideas? I am thinking about it 3 days already and i didn't find any answer (and questions also). Thanks!

I just put your functions in my console and it seemed to work fine. I am able to click and drag scrollbar, but the mouse wheel does not work. Is that what you want? — Villarrealized, Nov 17 '13 at 03:30

score 45 · Answer 1 · edited May 11 '22 at 03:52

45

Prevent the window from scrolling with mouse wheel:

As document level wheel event listeners are treated as Passive, we need to mark this event listener to be treated as Active:

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

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

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

More info about scrolling intervention and using passive listeners to improve scrolling performance.

Outdated Method:
~~window.onwheel = function(){ return false; } // Old Method~~
more info (thanks @MatthewMorrone)

edited May 11 '22 at 03:52

ashleedawg

20,365
9
72
105

answered May 12 '14 at 09:59

Saurin Dashadia

1,140
11
25

1

this doesn't appear to work anymore, getting this in the console: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312 – Matthew Morrone Jan 17 '20 at 15:02
@MatthewMorrone Thanks for pointing this out. Please check updated answer for the solution. – Saurin Dashadia Jan 24 '20 at 08:30
1

@SaurinDashadia, thank you! It seems that if there is a mouse wheel listener on the parent element, you can just return `true` in the `onwheel` function. Then the wheel event will work correctly on the child element, and won't trigger the wheel event on the parent element. To restore the wheel event for the parent element, you need to set the `onwheel` function to `null`. – gearcoded Apr 22 '22 at 06:26

score 7 · Answer 2 · edited Apr 12 '17 at 08:10

7

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.

edited Apr 12 '17 at 08:10

Angel Politis

10,955
14
48
66

answered Mar 23 '16 at 15:56

Daniel M. M. Pochintesta

71
1
2

Worked like a charm! – Stender Jun 11 '18 at 11:46
It actually works fine on Chrome, as of version 78.0.3904.108 – Graham Meehan Nov 20 '19 at 17:12

score 3 · Answer 3 · answered Jan 15 '19 at 15:51

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
}

Prevent mouse wheel scrolling, but not scrollbar event. JavaScript

3 Answers3

Prevent the window from scrolling with mouse wheel:

Linked