Prevent the content to scroll down with the mouse scroll unless by using the scroll bar

Question

How can I make the content none scrollable by the mouse wheel, but instead, can only be scrolled down using the scroll bar.

Thanks so much.

Answer 1

Youcan bind touchstart event, but there is no scrollbar on mobile, so how would user scroll?

$("body").bind("mousewheel, touchstart", function() {
     return false;
});

Demo fiddle

Answer 2

Well I find this solution

touch-action: pan-x;

it will allow you to click the content but will unable to scroll it down

Answer 3

you can use jQuery. something like this

$("body").bind("mousewheel", function() {
     return false;
});