HTML content only scrolls with scrollbar, not mouse wheel

css, mouseevent, mousewheel, overflow, scroll

Solution

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.

Problem

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!

Original source