HTML content only scrolls with scrollbar, not mouse wheel

Question

I have a <div> on my page with a fixed height, and overflow-y: scroll; set so that the content will scroll when it passes the bottom edge of the <div>. Nothing out of the ordinary.

For some bizarre reason, the mouse wheel will only scroll the content if the cursor is over empty space in the <div> or if it's over the scrollbar itself. If the cursor happens to be over any of the text content in the <div>, the mouse wheel won't do anything.

This happens in both Firefox and Chrome, so it isn't just a quirk of a particular rendering engine or something.

The <div> in question is overlaid on top of another via position: absolute;, so I'm assuming that somehow the <div> behind it is interfering with the mouse wheel event - but then you'd think the problem would be reversed (the <div> would scroll when the cursor was over the text, not over the empty space).

Anyone else ever see anything like this before? I'm stumped!

I am able to replicate the problem: http://jsfiddle.net/qNS3S/1/ — jeffjenx, May 04 '12 at 13:46

score 7 · Accepted Answer · edited May 23 '17 at 12:26

7

Got it - it's because I was using the FancyBox mousewheel plugin. This causes FancyBox to capture all mousewheel events (for use with scrolling through galleries). Since I'm not actually using any galleries, I have no need for it, so I took it out and immediately that fixed my problem.

edited May 23 '17 at 12:26

Community

1
1

answered May 04 '12 at 14:35

daGUY

27,055
29
75
119

1

in my case, two plugins were there - mousewheel plugin and smoothpagescroll – Maulik Vora Oct 14 '16 at 13:19

HTML content only scrolls with scrollbar, not mouse wheel

1 Answers1

Linked