How to prevent the map from panning when scrolling the page

Question

When an HTML page contains a map, and the user scrolls down the page using their mouse wheel, when the user's mouse passes over the map the page will stop scrolling while the map itself will pan. See Demo1.

I would like to emulate the behaviour detailed at A simple usability trick for Google Maps using the ArcGIS Server JS API 3.x.

That is, the page should scroll unless the user explicitly drags within the map, in which case the map should pan.

The behaviour is almost there in Demo2, where the page scrolls even if your mouse is over the map.

map.on("load", function(){
  // Disable navigation by default, so scrolling the page doesn't scroll the map
  map.disableMapNavigation();

  // When the user tries to pan the map, allow this
  map.on('mouse-drag-start', function(){
    map.enableMapNavigation();
  });

  // Restore the no-scroll behaviour when the mouse leaves the map
  map.on('mouse-out', function(){
    map.disableMapNavigation();
  });
});

However, the map pan is not enabled unless you first click once within the map, release the mouse button, and then pan. Is it possible to achieve the seamless effect shown with Google Maps in the blog post?

I tried the mouse-drag, mouse-drag-start and mouse-down events but the behaviour is the same for all events.

Answer 1

You never give a reason for using the dis/enableMapNavigation method rather than the dis/enableScrollWheelZoom method. Use the latter.