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

Ответ 1

'self.webView.scrollView.bounces = NO;'

Просто добавьте эту строку в файл viewDidLoad файла mainViewController.m вашего приложения. вы можете открыть его в Xcode и добавить его.

Это должно сделать страницу без каких-либо резиновых отскоков, все еще позволяющих прокручивать в представлении приложения.

Ответ 2

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

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

Пример:

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

Ответ 3

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;
    }
});

Причина этого в том, что мобильный 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;
    }
});

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

Ответ 4

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

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

Ответ 5

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

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

<body ontouchmove="blockMove()">

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

Ответ 6

Отключить:

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

Включить:

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

body {

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