Question

Here is my css for my map div:

#map {
              position: fixed;
              top: 9.48em;
              bottom: 2.2em;

            }

My OpenLayers map is rendered in this div. Everything works fine. But as soon as I add a

overflow:auto;

property in the css above, the zooming using scroll wheel on my map gets disabled. I need to add this property because now i need to show some tables in place of map.

I suspect that when i add scroll bars the event of scroll wheel is not reaching the OpenLayers.

Any way around this problem by fixing the css or some OpenLayers Code?

I know I can do it by adding some logic in JS that changes css property dynamically depending on the page being loaded, but unless absolutely necessary, I don’t want to go that route, and find the clean solution.

Thanks.

Answer 1

Good question, that’s by design: if you are on a scrollable div, OpenLayers won’t do anything (it will check the overflow style for this), otherwise, it will scroll the map.

Look at the source for explanations: https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Handler/MouseWheel.js#L149

The check for overflow style is here: https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Handler/MouseWheel.js#L124