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

Question

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

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

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

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

Answer 1

Вызывать warnDefault для события на самом деле правильно, но вы не хотите делать это для каждого компонента, так как это также предотвратит прокрутку в 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();
    }

});