Can't continue scrolling on mobile devices when a map occupy all the screen

That is a typical problem that occurs in many websites, unfortunately.

You have a few options:

  1. make the map not take up 100% of the width, so there is a little room on the side so a user can scroll
  2. insert a button (an arrow, for example), positioned somewhere in the map, that lets you jump to the space above/below the map
  3. Yan can set the dragging option to false, as in:

    var map = L.map('map', {dragging: false}).setView(center, 3);
    

But option 3 will always disable it. That might not always be desired. You could even check whether a mobile device is used, and then disable dragging.


I would recommend using this options:

var map = L.map('map', { dragging: !L.Browser.mobile, tap: !L.Browser.mobile });

This leads to the most intuitive behaviour I ever found. One finger scrolls page, two fingers control panning and zooming of the map.

Tags:

Mobile

Leaflet