HTML content only scrolls with scrollbar, not mouse wheel

css scroll overflow mouseevent mousewheel
daGUY picture daGUY · May 4, 2012 · Viewed 22.4k times · Source

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!

Answer

daGUY picture daGUY · May 4, 2012

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.

Related questions

How to display scroll bar onto a html table

I am writing a page where I need an html table to maintain a set size. I need the headers at the top of the table to stay there at all times but I also need the body of the …

Read More
CSS - Overflow: Scroll; - Always show vertical scroll bar?

So currently I have: #div { position: relative; height: 510px; overflow-y: scroll; } However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div …

Read More
Have a fixed position div that needs to scroll if content overflows

I have actually two issues, but lets resolve the primary issue first as I believe the other is easier to address. I have a fixed position div on the left side of the scroll for a menu. Right side is …

Read More