Scroll wheel scaling on OpenLayers stops working with setting div to overflow: auto
Here is my css for my div map:
#map {
position: fixed;
top: 9.48em;
bottom: 2.2em;
}
My OpenLayers map is displayed in this div. Everything works fine. But as soon as I add
overflow:auto;
in the css above, scaling using the scroll wheel is disabled in my map. I need to add this property because now I need to show some tables instead of a map.
I suspect that when I add scrollbars, the scroll wheel event doesn't reach OpenLayers.
How to get around this issue by installing css or some OpenLayers code?
I know I can do this by adding some logic in JS that changes the css property dynamically based on the page being loaded, but if absolutely necessary, I don't want to go that route and find a clean solution.
Thank.
source to share
Good question, it's by design: if you're on a scrollable div, OpenLayers won't do anything (it checks the overflow style for that), otherwise it will scroll the map.
Look at the source for the explanations: https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Handler/MouseWheel.js#L149
An overflow style checker is here: https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Handler/MouseWheel.js#L124
source to share