HTML content only scrolls with the scrollbar, not the mouse wheel

I have <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 <div>. Nothing unusual.

For some strange reason, the mouse wheel will scroll the contents only if the cursor is above the empty space in <div>, or if it is located above the scrollbar itself. If the cursor is over any text content in <div>, the mouse wheel will do nothing.

This happens both in Firefox and in Chrome, so it’s not just a quirk of a particular rendering engine or something like that.

The one in <div>question is superimposed on top of the other through position: absolute;, so I assume that some <div>behind it interferes with the mouse wheel event - but then you think that the problem will be (it <div>will scroll when the cursor was over text and not over empty space).

Has anyone else seen anything like this before? I'm at a dead end!

+5
source share
2 answers

Got it - this is because I used the FancyBox mousewheel plugin . This causes the FancyBox to capture all mouse events (for use when scrolling through galleries). Since I actually do not use any galleries, I do not need this, so I took this and immediately fixed my problem.

+5
source

z-index: -1; CSS DIV.

+2

All Articles