Whole page scrolls when panning on map on mobile

1881
5
Jump to solution
05-11-2016 07:32 AM
JustinGreco
Occasional Contributor

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.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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);

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Justin,

can you provide a code sample that demos your issue?

0 Kudos
JustinGreco
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor II

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

JustinGreco
Occasional Contributor

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

0 Kudos