Отключить прокрутку в веб-приложении iPhone?

изменить на touchstart событие вместо touchmove. Под Один Палец События он говорит, что никакие события не отправляются во время кастрюли, так что touchmove может быть слишком поздно.

Я добавил слушателя в документ, а не тело.

пример:

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

document.addEventListener('touchstart', function (e) {
    e.preventDefault();
});

не используйте ontouchmove свойство для регистрации обработчика событий, поскольку вы рискуете перезаписать существующий обработчик(ы) событий. Используйте addEventListener вместо этого (см. Примечание о IE на странице MDN).

остерегайтесь, что предотвращение по умолчанию для touchstart событие window или document отключит прокрутку нисходящих областей.

чтобы предотвратить прокрутку документа, но оставить все остальные события нетронутыми предотвратить по умолчанию для первого touchmove событие после touchstart:

var firstMove;

window.addEventListener('touchstart', function (e) {
    firstMove = true;
});

window.addEventListener('touchmove', function (e) {
    if (firstMove) {
        e.preventDefault();

        firstMove = false;
    }
});

причина, по которой это работает, заключается в том, что mobile Safari использует первый шаг, чтобы определить, прокручивается ли тело документа. Я понял это, разрабатывая более сложное решение.

в случае, если это когда-нибудь перестанет работать, более сложным решением является проверка touchTarget элемент и его родители и сделать карту направлений,которые могут быть прокручены. Тогда используйте первый touchmove событие для определения направления прокрутки и просмотра, будет ли он прокручивать документ или целевой элемент (или любой из родителей целевого элемента):

var touchTarget,
    touchScreenX,
    touchScreenY,
    conditionParentUntilTrue,
    disableScroll,
    scrollMap;

conditionParentUntilTrue = function (element, condition) {
    var outcome;

    if (element === document.body) {
        return false;
    }

    outcome = condition(element);

    if (outcome) {
        return true;
    } else {
        return conditionParentUntilTrue(element.parentNode, condition);
    }
};

window.addEventListener('touchstart', function (e) {
    touchTarget = e.targetTouches[0].target;
    // a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
    scrollMap = {}

    scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollLeft > 0;
    });

    scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollTop > 0;
    });

    scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollWidth > element.clientWidth &&
               element.scrollWidth - element.clientWidth > element.scrollLeft;
    });

    scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollHeight > element.clientHeight &&
               element.scrollHeight - element.clientHeight > element.scrollTop;
    });

    touchScreenX = e.targetTouches[0].screenX;
    touchScreenY = e.targetTouches[0].screenY;
    disableScroll = false;
});

window.addEventListener('touchmove', function (e) {
    var moveScreenX,
        moveScreenY;

    if (disableScroll) {
        e.preventDefault();

        return;
    }

    moveScreenX = e.targetTouches[0].screenX;
    moveScreenY = e.targetTouches[0].screenY;

    if (
        moveScreenX > touchScreenX && scrollMap.left ||
        moveScreenY < touchScreenY && scrollMap.bottom ||
        moveScreenX < touchScreenX && scrollMap.right ||
        moveScreenY > touchScreenY && scrollMap.top
    ) {
        // You are scrolling either the element or its parent.
        // This will not affect document.body scroll.
    } else {
        // This will affect document.body scroll.

        e.preventDefault();

        disableScroll = true;
    }
});

причина, по которой это работает, заключается в том, что mobile Safari использует первое сенсорное перемещение, чтобы определить, прокручивается ли тело документа или элемент (или любой из родителей целевого элемента) и придерживается этого решения.

Если вы используете jquery 1.7+, это хорошо работает:

$("donotscrollme").on("touchmove", false);

Это должно работать. Нет больше серых областей в верхней или нижней части:)

<script type="text/javascript">
   function blockMove() {
      event.preventDefault() ;
}
</script>

<body ontouchmove="blockMove()">

но это также отключает все прокрутки территории. Если вы хотите сохранить прокручиваемые области и по-прежнему удалить эффект резиновой ленты сверху и снизу, см. здесь:https://github.com/joelambert/ScrollFix.

отключить:

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

включить:

document.ontouchstart = function(e){ return true; }

страница должна быть запущена с главного экрана для работы мета-тега.

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

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

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

body {

height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}