IPhone Web App - остановка прокрутки тела

Ответ 1

После рассмотрения нескольких решений я начал создавать собственное решение:

bouncefix.js

http://jaridmargolin.github.io/bouncefix.js/

Использование:

bouncefix.add(эл)

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

bouncefix.remove(эл)

Удалите всех слушателей/наблюдателей, ответственных за фиксацию полного упругого отскока тела.

Почему?

Scrollfix было хорошим началом, однако я заметил несколько проблем:

• Он работал только при наличии прокручиваемого содержимого. Если у вас есть пустая страница, эффект отскока на теле будет происходить.
• API не выявил метод удаления слушателей. Мое приложение будет имеют несколько страниц, и он не чувствовал себя хорошо, чтобы сохранить все слушатели, прикрепленные, когда пользователь перемещается вокруг приложения.

Как?

Он использует аналогичный подход к методу scrollfix. Проблема возникает, когда вы находитесь в одной из крайних точек прокрутки. На touchstart мы смотрим, находимся ли мы в верхней крайней или нижней крайности, добавляя 1px, если мы наверху, и удаляем 1px, если мы внизу.

К сожалению, этот трюк работает только в том случае, если мы можем установить значение scrollTop. Если контент еще не прокручивается, например, у вас есть только 1 элемент списка, все тело снова будет прокручиваться. Bouncefix.js позаботится обо всем этом за кулисами, используя делегирование делегирования и проверку прокруткиHeight против offsetHeight в любое время, когда срабатывает сенсорный старт. В случае отсутствия прокручиваемого содержимого вся прокрутка на контейнере блокируется с помощью e.preventDefault();

Ответ 2

что сработало для меня:

html, body, .scrollable {
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
}

плюс (используя jQuery...)

$(function() {
  $(document).on("touchmove", function(evt) { evt.preventDefault() });
  $(document).on("touchmove", ".scrollable", function(evt) { evt.stopPropagation() });
});

важно, чтобы вызов evt.stopPropagation() использовал делегат, так как он также попал в документ, но был отменен в последнюю секунду.

По сути, это улавливает все события touchmove в документе, но если исходное событие будилось с .scrollable, мы просто stopPropagation вместо отмены события.

Ответ 3

Попробуйте поместить это вверху вашего JS файла..

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

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

Источник: Остановить UIWebView от "bouncing" вертикально?

Ответ 4

Update:

Эта проблема была болью для многих людей, но вот твердое решение, созданное bjrn:

Демо: http://rixman.net/demo/scroll/
И здесь обсуждается это: https://github.com/joelambert/ScrollFix/issues/2

Это было первоначально опубликовано ryan в ответ на мой вопрос: Предотвратить по умолчанию умолчание по родительскому, но не ребенок.

Я надеюсь, что это поможет некоторым людям.

Оригинальный ответ:

Я действительно смотрю на ту же самую проблему, и я натолкнулся на это:

https://github.com/joelambert/ScrollFix

Я пробовал, и он работает почти отлично. Если вы скопируете весь код в демонстрационную версию и перейдете на iOS, вы не увидите серый фон, если не возьмете черную полосу и попробуйте прокрутить ее. Тем не менее, было бы довольно легко использовать код, который Бен поставил для предотвращения этого события (preventDefault()).

Надеюсь, что это поможет (это определенно помогло мне!) будет:)

Ответ 5

Как и другие, я написал краткую функцию, которая ударяет мой прокручиваемый div на один пиксель, когда он прокручивается вверх или вниз, чтобы не перетащить всю страницу. Это прекрасно для моего прокручиваемого div, но фиксированные div на моей странице все еще были подвержены перетаскиванию страницы. Я случайно заметил, что когда я накладывал фиксированный div поверх моего прокручиваемого div (который больше не перетаскивал страницу из-за моей функции bump), события перетаскивания касания проходили через фиксированный div до прокручиваемого div под ним и что фиксированный div не был более длинный потенциальный перетаскиватель страниц. Исходя из этого, я решил, что возможно использовать полноэкранный прокручиваемый div в фоновом режиме в качестве основы для всей страницы, чтобы все перетаскивание проходило, и мои фактические элементы сверху были бы безопасными. Фундамент фундамента должен действительно прокручиваться, поэтому я поместил внутри него наполнитель и сделал его немного большим, чтобы гарантировать его прокрутку. И это сработало! Ниже приведен пример использования этой идеи для предотвращения перетаскивания страницы. Извините, если это очевидно или уже опубликовано, но я не видел этого нигде, и это действительно улучшило мое веб-приложение. Пожалуйста, попробуйте и дайте мне знать, если это поможет.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<style>
.myDiv {
    position:absolute;
    left:0;
    width:100%;
    color:white;
}

.myDiv.hidden {
    top:0;
    height:100%;
    -webkit-overflow-scrolling:touch;
    overflow-y:scroll;
}

.myDiv.title {
    top:0;
    height:30%;
    background-color:#6297BC;
}

.myDiv.scroll {
    bottom:0;
    height:70%;
    -webkit-overflow-scrolling:touch;
    overflow-y:scroll;
    background-color:#ADADAD;
}
</style>

<script>
function setup() {  
    hiddenScrollingDiv.addEventListener("scroll", preventWindowScroll);
    visibleScrollingDiv.addEventListener("scroll", preventWindowScroll);
    hiddenScrollingDiv.style.height=window.innerHeight; 
    visibleScrollingDiv.style.height=parseInt(window.innerHeight*.7)+1; 
    fillerDiv.style.height=window.innerHeight+2;
    hiddenScrollingDiv.scrollTop=1;
    visibleScrollingDiv.scrollTop=1;
}

function preventWindowScroll(evt) {
    if (evt.target.scrollTop==0) evt.target.scrollTop=1;
    else if (evt.target.scrollTop==(evt.target.scrollHeight-parseInt(evt.target.style.height))) evt.target.scrollTop=evt.target.scrollHeight-parseInt(evt.target.style.height)-1;
}
</script>
</head>

<body onload="setup()">
<div id="hiddenScrollingDiv" class="myDiv hidden"><div id="fillerDiv"></div></div>
<div id="visibleTitleDiv" class="myDiv title"><br><center>Non-scrolling Div</center></div>

<div id="visibleScrollingDiv" class="myDiv scroll">
<ul>
    <li style="height:50%">Scrolling Div</li>
    <li style="height:50%">Scrolling Div</li>
    <li style="height:50%">Scrolling Div</li>
</ul>
</div>

</body>
</html>