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.

score 0 · Answer 1 · answered Jun 17 '15 at 04:08

0

you can use jQuery. something like this

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

answered Jun 17 '15 at 04:08

Junaid

Thanks! that works perfectly, but how about if I try to access my page in android or ios device, Because I thought, the mouse-wheel represents the scrolling using our finger in our phone, the content still scrolls in phone devices. Sorry for bad english. Thanks so much – Christian Angel Galamay Jun 17 '15 at 04:21

score 0 · Accepted Answer · answered Jun 17 '15 at 05:24

0

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

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

answered Jun 17 '15 at 05:24

Bogdan Kuštan

Thanks! But, is there a way that the user cannot scroll the content itself, but there is still a scrollbar in the right part that they will use to scroll (something like mouse ticking the scroll bar and drags it down in our desktop.) Thanks so much.. – Christian Angel Galamay Jun 17 '15 at 05:31
You can make fake scrollbar, for example [like in this fiddle](http://jsfiddle.net/4pdhLwhv/3/) – Bogdan Kuštan Jun 17 '15 at 06:55

score 0 · Answer 3 · answered Jun 18 '15 at 03:22

0

Well I find this solution

touch-action: pan-x;

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

answered Jun 18 '15 at 03:22

3 Answers3