topic Re: Whole page scrolls when panning on map on mobile in ArcGIS JavaScript Maps SDK Questions

Whole page scrolls when panning on map on mobile

JustinGreco — Wed, 11 May 2016 14:32:54 GMT

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.

Re: Whole page scrolls when panning on map on mobile

RobertScheitlin__GISP — Fri, 13 May 2016 00:24:55 GMT

Justin,

can you provide a code sample that demos your issue?

Re: Whole page scrolls when panning on map on mobile

JustinGreco — Fri, 13 May 2016 01:08:54 GMT

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.

Re: Whole page scrolls when panning on map on mobile

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:34:36 GMT

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

Re: Whole page scrolls when panning on map on mobile

DavidMeza — Fri, 13 May 2016 19:08:09 GMT

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

Re: Whole page scrolls when panning on map on mobile

JustinGreco — Fri, 13 May 2016 19:32:33 GMT

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