MapBox scroll page on touch

Question

I'm trying to implement MapBox on a layout which fills 100% of the page. I've disable the map zoom options but the problems comes when trying to scroll on touch devices where the map fills the viewport. Can I override this or have the browser treat it like an image?

Answer 1

Yes, you can stop the Mapbox listeners from preventing default actions by setting the leaflet function to do nothing:

L.DomEvent.preventDefault = function(e) {return;}

To remove the outline placed around the element by the browser that otherwise would have been prevented, you can add:

*:focus {
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
}

This allowed scrolling on touch devices for me, though I've only tested on Android. Note that this may have other consequences on your application - these could probably be prevented by going into mapbox.js and removing this call from only the listeners that you need.