Whole page scrolls when panning on map on mobile

[JustinGreco]

When panning on a map while on a mobile device, the entire page scrolls, making the app very difficult to use.  Is there some CSS that can be applied to get around this issue?  This only occurs on touch devices, it does not happen when using a track pad.

[RobertScheitlin__GISP]

Justin,

can you provide a code sample that demos your issue?

[JustinGreco]

Robert,

It happens on any of the Esri samples as well:

Get started with MapView - Create a 2D map | ArcGIS API for JavaScript 4.0

If you look at it on a phone (we were using iPhones) the map will pan, but then the rest of the page scrolls as well.  We haven't looked too much into it, though I'd check here first.

We were looking at what it would take to move an app we are releasing next week to 4.0, but that was a bit of a deal breaker since it needs to work on mobile devices as well.

[RobertScheitlin__GISP · Accepted solution]

Justin,

  There is a easy fix for this if you are embedding the map in an iframe like the link you provided is. In the html document that has the map add these lines to the script tag:

window.addEventListener('touchmove', function(event) {
        // Prevent scrolling on this element
        event.preventDefault();
    }, false);

[DavidMeza]

This works by replacing window for document.getElementById('map') if it's not in an iframe.

[JustinGreco]

Thanks for the quick response!  That worked, it wasn't inside an iframe, but your answer put us on the right track.