IPhone Web App - Отключение/прокрутка тела в iOS8

Да, я знаю. Этот вопрос задавали тысячу раз. Благодаря всем вам, ребята, я смог найти решение, которое, наконец, выполнило эту работу для меня в <= iOS7. Однако после обновления до iOS 8 ничего не работает!

Что отлично работало для меня в iOS7

Css

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

Другие решения, которые я пробовал:

Все здесь: iPhone Web App - остановка прокрутки тела

И здесь: iOS Safari - как отключить прокрутку, но разрешить прокручиваемые divs нормально?

И здесь: Отключить iOS Overscroll, но разрешить прокрутку тела

И еще...

Итак, кто-нибудь знает способ iOS8, позволяющий отключить эффект прокрутки тела за пределами прокрутки/bounce (помимо собственных решений, примененных к проектам телефонной связи)?

Ответы

Ответ 1

Так что это беспокоило меня уже много лет, и я наконец нашел решение!

Pre iOS8, Safari не имеет субпиксельной рендеринга. Теперь, когда есть субпиксельная рендеринг, высота объявленного элемента указана как десятичное число подпикселей, а высота прокрутки - фактическое выделенное целочисленное значение. Если вы укажете размеры в процентах, это может привести к тому, что высота будет на долю пикселя меньше, чем должна быть.

Вместо тестирования для

if (elem[0].scrollHeight > height) {
                    e.stopPropagation();
}

Тестирование для этого даст вам округленное число, соответствующее совпадению.

if (elem[0].scrollHeight > Math.ceil(height)) {
                    e.stopPropagation();
}

Ответ 2

Это, в сочетании с тем, что position: fixed становится более надежным, допускает некоторые интересные эффекты. Вы можете сделать прилив, чтобы освежиться с помощью простой фиксированной "подкладки", которая остается на месте, когда тело сбрасывается, тем самым раскрывая ее.

Чтобы ответить на ваш вопрос:

A touchmove, который отбрасывает (event.preventDefault()) событие, если выполняются следующие условия:

  • Событие далее, чем последнее.
  • Текущий элемент target и body находятся в scrollTop == 0
  • То же самое для вышеупомянутых двух условий, чтобы заботиться о нижнем резиновом натяжении (scrollTop + innerHeigh == scrollHeight)

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

Ответ 3

это решенная проблема с preventOverScroll.js

Взгляните на www.digitpro.it/Takashi вкладки Promozioni и Altro Chi Siamo обеспечивают iframe с прокруткой и без прокрутки эффекта отскока:) не стесняйтесь смотреть на исходный код JS + CSS