Клуб API Карт

Клуб API Карт

Прокрутка карты на touch устройствах

Пост в архиве.

Проблема следующая:

На адаптивном сайте, при прокрутке страницы возникает ситуация, когда прокрутка невозможна из-за того что страницу перекрывает карта.

Т.е. прокручиваем страницу до карты, пытаемся докрутить до конца, но палец попадает на карту и скроллит ее.

Какие есть решения этой проблемы (средствами api)? 

Версия карты: последняя бета.

8 комментариев
Авторизуйтесь, чтобы оставить комментарий
Sergey Konstantinov
28 января 2016, 00:42
Либо оставлять полосу свободного места справа-слева от карты, либо отключать мультитач.
svirshchevskiy
28 января 2016, 00:42

Спасибо!

так отключаются мультитач жесты

map.behaviors.disable('multiTouch');

а так перетаскивание карты

map.behaviors.disable('drag');

Илья Харитонов
28 января 2016, 00:42

А что, получается нельзя отключить перетаскивание карты только с тач устройств? Потому что на компьютере такой проблемы нет, пусть таскают, там главное, если карта во всю ширину окна, отключить зум по скроллу колесом. А вот на тач устройствах возникает затык в прокрутке из-за этого.

kirill.frontend
14 марта 2016, 15:21
Илья Харитонов,
можно определить тип устройства самостоятельно и на основе этого отключать или не отключать перетаскивание.
Александр
14 декабря 2016, 07:22
Илья Харитонов,


Здесь подробно описано как реализовать. Все работает.
Алексей
17 ноября 2017, 10:14
Александр,
Не работает ссылка
doll1988
28 января 2018, 00:32
Алексей,
 Насколько я помню там был вот такой код


var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i)
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i)
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i)
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i)
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i)
},
any: function () {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows())
}
}
if (isMobile.any()) {
map.behaviors.disable('drag')
}

Но я придумал еще один вариант решения - можно при загрузке страницы проверять высоту окна браузера, и если оно меньше высоты карты заданной в стиле по-умолчанию,  то сделать размер окна карты, например, 0.6 от высоты  окна. Например так


mapHeight () {
  let tmp = '750px'
  let h = document.documentElement.clientHeight
  if (h < 750) {
    tmp = (h * 0.6) + 'px'
  }
  return tmp
}

В этом случае не будет необходимости отключать перетаскивание, так как сверху и снизу карты  всегда будет место за которое пользователь сможет ухватиться и перейти в другую часть страницы как вверх так и вниз.
f-ph
5 июля 2019, 10:56
kirill.frontend,
определение типа устройства и отключение drag для мобильных — это не правильно!


Устройства могут быть одновременно с сенсорным экраном и мышью. Поэтому самое верное решение: игнорировать drag, если он возник в результате события touchstart. Но я не знаю, как сделать это через API карт. Было бы здорово, если бы Яндекс добавил соответствующую настройку в behavior.Drag.