IOS: отключить прокрутку отказов, но разрешить обычную прокрутку

Я не хочу, чтобы содержимое моего сайта зависало, когда пользователь попал на край страницы. Я просто хочу, чтобы он остановился.

Общеизвестное решение javascript, которое я вижу повсюду, таково:

$(document).bind(
   'touchmove',
   function(e) {
     e.preventDefault();
   }
);

Но это предотвращает прокрутку целиком. Есть ли способ просто удалить отскок. Предпочтительно использовать CSS или метатег в отличие от JS, но все, что работает, будет делать.

Ответы

Ответ 1

Мне нужно добавить еще один ответ. Мой первый подход должен работать, но есть ошибка iOS, которая по-прежнему несут всю страницу, даже если e.stopPropagation.

mikeyUX найти обходное решение для этого: fooobar.com/questions/69833/... Интересно, почему он просто получил несколько кликов за эту замечательную идею...

Вот как я использовал свой подход в моем случае:

var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
    this.allowUp = (this.scrollTop > 0);
    this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
    this.slideBeginY = event.pageY;
});

content.addEventListener('touchmove', function(event) {
    var up = (event.pageY > this.slideBeginY);
    var down = (event.pageY < this.slideBeginY);
    this.slideBeginY = event.pageY;
    if ((up && this.allowUp) || (down && this.allowDown)) {
        event.stopPropagation();
    }
    else {
        event.preventDefault();
    }
});

Ответ 2

Отключить отскакивание, предотвращая поведение документа по умолчанию:

document.addEventListener("touchmove", function(event){
    event.preventDefault();
});

Разрешить прокрутку, не допуская, чтобы касание достигло уровня документа (там, где вы могли бы предотвратить прокрутку):

var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
    event.stopPropagation();
});

Обратите внимание на разницу между этими двумя:

event.stopPropagation()
event.preventDefault()

StopPropagation должен быть вашим выбором здесь! Вот очень хорошее объяснение: http://davidwalsh.name/javascript-events

Изменить: Такая же проблема, такое же решение: document.ontouchmove и прокрутка на iOS 5

Edit2: фиксированная опечатка в именах переменных добавлены скобки после методов

Ответ 3

Если применимо к Desktop Browser, не нужно никаких кодов JavaScript, всего несколько строк CSS-кодов:

html {
    height  : 100%;
    overflow: hidden;
}
body {
    height  : 100%;
    overflow: auto;
}

Ответ 4

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

noBounce.init({   
    animate: true
});

Если вы хотите предотвратить переключение только на один элемент, а не на всю страницу, вы можете сделать это так:

 noBounce.init({
    animate: true,
    element: document.getElementById("content")
  });

Ответ 5

Я попробовал много разных подходов, которые я нашел здесь, в stackoverflow, но iNoBounce - это то, что действительно сработало для меня: https://github.com/lazd/iNoBounce

Я просто включил его в свой index.html:

<script src="inobounce.js"></script>

Ответ 6

Нашел код, который работал со мной, я считаю, что он сработает.

Решение написано здесь: http://apdevblog.com/optimizing-webkit-overflow-scrolling/

В принципе, вам нужен этот js-код:

    document.addEventListener("DOMContentLoaded", ready, false);
    document.addEventListener("touchmove", function (evt)
    {
        evt.preventDefault();
    }, false);

    function ready()
    {
        var container = document.getElementsByClassName("scrollable")[0];
        var subcontainer = container.children[0];
        var subsubcontainer = container.children[0].children[0];

        container.addEventListener("touchmove", function (evt)
        {
            if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
            {
                evt.stopPropagation();
            }
        }, false);
    }

И тогда у вас есть прокручиваемые div с class= "прокручиваемым".