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



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.



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:

An overflow style checker is here:



All Articles