Adding a tooltip overlay /eventListener to OL map when / for scrolling

Question

I would like to fully implement Google Map API-s solution in Openlayers. I activated the ctrl+scroll zoom, but the poor user cannot know how to zoom now, and the nicest solution would be this: https://developers.google.com/maps/documentation/javascript/interaction

I tought i could add an Overlay to the Map when scrolling and ctrl button is not pressed. But Ol doesn't have this kind of event listener. Any idea?

document.getElementById("map").addEventListener("scroll",function(){console.log("scroll")})
this.map.addEventListener("scroll",function(){console.log("scroll")})

Answer 1

Try to attach this event listener to the viewport instead of the map itself. Also scroll event refers to the actual page being scrolled. What you probably need is to capture the mouse wheel event.

   map.getViewport().addEventListener("wheel", e => {
       //do your thing..
   });

Some default JS event listeners such as contextmenu, or wheel in your case, cannot be attached to the map because they are not included in the abstraction layer of the map object. However, keep in mind that I haven't tested it locally to see if this works, but I have made something similar with the contextmenu event listener. Apart from that, your case might need different handling of events meaning that you might want to capture the mouse wheel event in general and just check if the cursor is over the map or not in order to show the corresponding message. If you elaborate a bit more regarding your setup and show some more code, I'll be able to further help on this.