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.

+3


source to share


1 answer


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

+3


source







All Articles