Как предотвратить перетаскивание мобильного хрома

Я хочу предотвратить перетаскивание мобильного хрома (особенно iOS chrome). В моем веб-приложении есть событие вертикального панорамирования с шириной окна и шириной устройства, но при каждом изменении панорамирования мобильный хром обновляется из-за функции браузера по умолчанию. Кроме того, в браузере Safari экран катится во время события панорамирования. Я хочу отключить эти действия.

Конечно, я попробовал event.preventDefault(); и touch-action: none; Но это не выглядит работой. Должен ли я добавлять eventListner и touch-action "на теге тела"? Я ожидаю полезный ответ с примером.

Ответ 1

Вы должны увидеть следующую статью google. Он отвечает и предоставляет рабочую демонстрацию.

https://docs.google.com/document/d/12Ay4s3NWake8Qd6xQeGiYimGJ_gCe0UMDZKwP9Ni4m8/mobilebasic

Ответ 2

Так как мобильные прослушиватели событий Chrome >= 56 по умолчанию пассивны, а прослушиватели пассивных событий больше не могут предотвращать дефолты. Смотрите здесь

Вам нужно использовать активных прослушивателей событий, например:

document.addEventListener('touchstart', touchstartHandler, {passive: false});
document.addEventListener('touchmove', touchmoveHandler, {passive: false});

Вот рабочий пример:

https://output.jsbin.com/niyukadizu/quiet

https://output.jsbin.com/niyukadizu

Ответ 3

Попробуйте это.

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

Это сработало для меня. У меня были странные проблемы прокрутки из-за других javascript-хаков. Прочтите эту статью для более подробной информации.

https://developers.google.com/web/updates/2017/11/overscroll-behavior