Запретить прокрутку в браузере Android - PullRequest
4 голосов
/ 30 июня 2011

Есть ли способ предотвратить прокрутку визуализированной HTML-страницы в браузере Android?Следующее не оказывает никакого влияния на прокрутку страниц в браузере Android:

var preventDefault = function(e) {
    e.preventDefault();
    return false;
};
document.addEventListener('touchmove',preventDefault,false);
document.body.addEventListener('touchmove',preventDefault,true);
window.addEventListener('touchmove',preventDefault,true);

(я пробовал с включением и выключением всплывающих подсказок).

Это выглядит как AndroidWebkit делает «окно» такой же длины, что и документ, поэтому прокрутка выполняется в самом браузере, а не в теле документа или объекте окна DOM.Странно то, что это именно то, что делает webkit на iOS, но приведенный выше код все еще работает.

Ответы [ 2 ]

5 голосов
/ 04 июля 2011

Отвечая на мой собственный вопрос.

Проблема закончилась тем, что вам нужно захватить и подавить ontouchstart, а также ontouchmove на document, чтобы остановить прокрутку браузера.Это определенно отличается в iOS, но все равно работает одинаково на обеих платформах.

Фактический код, который я использовал в итоге, выглядит примерно так:

var preventDefault = function(e){
    e.preventDefault();
};
var touchstart = function(e) {
    document.addEventListener('touchstart', preventDefault,false);
    document.addEventListener('touchmove',  preventDefault,false);
    /*do other stuff*/
};
var touchend = function(e) {
    document.removeEventListener('touchstart', preventDefault,false);
    document.removeEventListener('touchmove',  preventDefault,false);
};

element.addEventListener('touchstart',  touchstart, false);
element.addEventListener('touchend',    touchend,   false);
0 голосов
/ 22 марта 2019

Не работает в Chrome на Android, хотя

Но предотвращение события в окне и остановка немедленного распространения помогает!

Обработчик не должен быть пассивным для этого.

МОЖЕТ БЫТЬдобавление обработчика событий на фазе capturing также помогло бы

Но этот фрагмент ниже проверен мной

window.addEventListener("touchmove", function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
}, { passive: false });

DEMO https://codepen.io/ColCh/full/qvLqoe

...