CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kosnkov
kosnkov

Reputation: 5911

Remove mouse wheel scrolling

I have a div with a height and overflow-x: hidden so I can see the vertical scroll-bar. Now when I scroll the whole page with the mouse wheel, if my cursor goes on the top of that div it starts scrolling the div instead of the page. Is it possible to remove mouse scrolling on this particular div?

Upvotes: 3

Views: 18152

Answers (4)

Axel
Axel

Reputation: 361

The only way I can think you can achieve something similar to this is by capturing the mouseover event of that particular div and disable the wheel for the whole page, and enable it again on mouseout. In this post you can see how to disable the wheel for the whole page : How to disable scrolling temporarily?

Upvotes: 1

Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

I don't know how important is the content in that div but another solution could be to make your pointer have no effect on div pointer-events:none. More explanations here.

Upvotes: 7

Antony Hutchison
Antony Hutchison

Reputation: 2991

I believe that you can add a handler to the 

onmousewheel

event to prevent it from scrolling (this is listed as HTML5 so might not work in older browsers). There's a full list of events here: http://www.w3schools.com/tags/ref_eventattributes.asp

Upvotes: 0

Dai
Dai

Reputation: 155055

No, because the user expects to be able to scroll a scrollable region with the mousewheel, and the user selects a scrollable region by moving the mouse pointer over it.

You can disable scrolling by setting overflow-y: hidden but that will cause the scrollbars to disappear.

Upvotes: 0

Related Questions