#ИМЯ?

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

У меня есть следующий экран:

В середине есть div, который установлен на -webkit-overflow: auto; иметь гладкую прокрутку внутри этого div. Прокрутка работает абсолютно нормально и плавно.

НО только пока я не сделаю touchmove на другом элементе вне этого div. Если я это сделаю и попробую снова прокрутить коннектор scrollcontainer, он будет заморожен и вообще не перемещается. После того, как я несколько раз коснулся контейнера прокрутки, он снова прокручивается. Он потеряет фокус прокрутки контейнера прокрутки и пытается прокрутить родителя.

Итак, если я сделаю такое движение:

Это выглядит так:

Примечание. Я просто делаю одно касание от нижнего контейнера в div переполнения. После отпускания пальца, а затем повторного прокрутки, он по-прежнему прокручивает родительский div.

Я сделал небольшой пример, так что вы можете иметь вид с вашего iPhone/телефона здесь.

Эта проблема возникает только при использовании -webkit-overflow: auto С нормальным overflow: scroll всегда работает, но да... вы знаете, насколько лагги это прокрутка.

Есть ли способ заставить фокус прокрутки в желаемом контейнере, когда вы нажимаете/нажимаете на контейнер с помощью -overflow-scrolling: touch; ?

Ответ 1

IOS Safari Browser никогда не дает вам полного контроля над прокруткой. Однако есть "хак", который вы можете использовать, для этого требуется JS tho:

заданное position: fixed на body,html
Как только появится touchmove, установите body.scrollTop = 0 Итак, в вашем случае добавьте:

CSS

body, html {
  margin: 0;
  position: fixed;
}

JS

document.addEventListener('touchmove',function (){
  document.body.scrollTop = 0
})

Пример страницы для тестирования на устройстве

Btw, лучший способ справиться с этим состоит в том, чтобы сделать заголовок/элементы управления фиксированными и добавить дополнение к конвейеру scrollcontainer. Это не требовало бы JS. попытайся

Ответ 2

У меня тоже была эта проблема, мой сайт отлично работал на телефонах Android, но на ios мне приходилось несколько раз нажимать, чтобы активировать свиток.

Я попробовал отключить прокрутку тела, даже попробовал это

-webkit-overflow-scrolling: touch; /* Lets it scroll lazy */

-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */

Мне пришлось использовать пользовательский плагин прокрутки mCustomScrollbar

Этот плагин полностью отменяет прокрутку системы. Здесь javascript управляет позиционированием содержимого прокрутки. Он делает position:relative содержимого position:relative и использует top для прокрутки содержимого.

Если этот плагин не работает для вас, вы можете попробовать любой другой плагин прокрутки. Все они работают одинаково.