How to restore default scrolling behaviour on arcGIS?

Question

I have one issue using a map with arcGIS API:

When the mouse pointer is above the map, default page scrolling is blocked. I know that I can suppress map zooming on scroll with stopPropagation() on mouse-wheel event, but that leads only to disabling zoom. The page still does not move on scroll...

That causes bad user experience, especially when using large / full-screen maps inside a page.

Any idea?

Answer 1

Disabling scroll-zooming on the view using code below (like the esri demo here) does not prevent the DOM element wheel event to be triggered which prevent the default page scrolling;

  //this prevent the mapView to zoom on wheel but does not make the page to scroll as wanted
  view.on("mouse-wheel", function(event) {
    // disable mouse wheel scroll zooming on the view
    event.stopPropagation();
  });

So what you need to do, is to add a wheel event listener on the DOM element that handle the esri wheel event and then do a event.stopImmediatePropagation() so the esri wheel event that cancel the default page scrolling would not be triggered.

With the API v.4.9 the DOM element that you have to use have the esri-view-surface class

  var viewSurfaceElem = document.getElementsByClassName("esri-view-surface")[0];
  viewSurfaceElem.addEventListener("wheel", function(event) { event.stopImmediatePropagation(); });

See live demo here: https://codepen.io/anon/pen/bQLwwm