Prevent OpenLayers page scrolling when using the mouse wheel on map buttons or overlays?

Question

I have an OpenLayers 7 map. Let's take the Popup example. When I use the mouse scroll wheel over the map, the map zooms in and out as expected.

However, when the mouse scroll wheel occurs over the popup or the map controls, the whole page scrolls up or down. I want to avoid any scrolling at all when the mouse is over the map.

For the popup (Overlay) I can set the stopEvent property to false. In this case, using the mouse wheel over the popup zooms the map in or out. Not ideal, but at least this way the page doesn't scroll. I haven't found any similar property that I can use either in the default or custom controls.

How can I prevent the page from scrolling when using the mouse wheel on map buttons or the popup? Basically what I would want is to capture the event, do nothing, and prevent it from being propagated to either the map or the page.

Answer 1

Quick solution would be to catch scroll event over map element and prevent default action. Not thoroughly tested, but on basic quick test it worked.

Code could look something like this:

function processWheelEvent(evt) {
  evt.preventDefault();
}

document.getElementById('map').addEventListener('wheel', processWheelEvent);