Scroll only responds to scroll wheel when directly over scrollbar

Question

High level: What kind of things can prevent the mouse wheel from being interpreted properly for scrolling? What are some debugging tools to check these?

I have a section of my page that is correctly displaying a vertical scroll bar. However the scroll wheel on the mouse fails to scroll the section unless the mouse is directly over the scroll bar.

What I believe is the relevant div has overflow-x: hidden and overflow-y: auto.

These are coming from the Zurb Foundation Apps CSS. I have, unfortunately, been unable to replicate this behavior within jsfiddle, so I'm hoping for further investigative tips.

Answer 1

This appears to relate to Foundation Apps grid-block classes. If you have a grid-block which has a single child grid-block this can somehow prevent the scroll wheel working.

I ended up replacing the child grid-block with a raw, full-width div.

Answer 2

I found the problem was the grid-frame class, specifically setting the height as 100vh causes the scroll wheel to bug out.

I replaced the grid-frame with a grid-block and didn't use grid-frame at all.