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!