Отключить резиновую ленту в полноэкранном веб-приложении iOS.

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

Я экспериментировал с

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

но это отключает прокрутку в любом контейнере. Есть идеи? Большое вам спасибо.

Ответы

Ответ 1

Вызов preventDefault для события на самом деле правильный, но вы не хотите делать это для каждого компонента, так как это также предотвратит прокрутку в div (как вы упоминаете) и, например, скользящие по входам диапазона. Поэтому вам нужно добавить проверку обработчика ontouchmove, чтобы увидеть, касаетесь ли вы компонента, который разрешен для прокрутки.

У меня есть реализация, которая использует обнаружение класса CSS. Компоненты, которые я хочу разрешить касанием, просто присваивают класс.

document.ontouchmove = function (event) {
    var isTouchMoveAllowed = false;
    var p = event.target;

    while (p != null) {
        if (p.classList && p.classList.contains("touchMoveAllowed")) {
            isTouchMoveAllowed = true;
            break;
        }
        p = p.parentNode;
    }

    if (!isTouchMoveAllowed) {
        event.preventDefault();
    }

});