Как решить баг со скроллом в safari?

Question

[webfln]

Всем привет. У меня следующая проблема с safari на смартфоне
Я хочу заблокировать скролл на документе, и разрешить (скролить) внутри главного блока с помощью overflow-y: scroll

Пример того чего пытаюсь достичь:
https://jsbin.com/jalitidufe/1/?output

В хроме на андроиде - все замечательно, но на IOS начинаются проблемы, я так понимаю из-за их эластичного скрола, или же все таки баг прячется в неправильном фокусе.

Если ты промахнулся пальцем и в фокус попал хедер, а не главный блок - фризится весь скролл, и нужно снова тапнуть по блоку с overflow-y: scroll, чтобы скролл продолжал работать.

Перелопатил всю сеть в поисках ответа, но ответа так и не нашел ответа, а нашел только схожие проблемы, например:
https://stackoverflow.com/questions/57380337/mobil...

Спасибо за ответы

Comments

[Rustam Bainazarov]

Нет решения. Эта проблема есть даже на сайте apple.com.

Эта проблема есть даже в приложении настроек, LOL! Когда приходит обновление системы, там есть окошко описания с прокруткой внутри общего окна — так там тоже эта проблема есть.

Словом, особенность реализации фокуса прокрутки.

-webkit-overflow-scroll: touch вообще глючная штука, которая плохо работает с fixed и transform.

[webfln]

Рустам Байназаров, Бесполезно приходить к такой структуре?
У меня получилось отловить touchmove на элементе на котором фризится скролл, и вызвать preventDefault()
Но это выглядит супер костыль. Что неужели нет изящного способа перехватить событие document, и делегировать на элемент?

[Rustam Bainazarov]

webfln, вообще бесполезно. Если удалось что-то решить с помощью JS, то и слава богу. Никаких иных решений нет.

[Rustam Bainazarov]

webfln, например, я тоже только с помощью JS решил вопрос фиксации прокрутки с сохранением позиции:
Возможно ли запретить прокрутку в iOS Safari с сохранением текущего положения?

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

[webfln]

Рустам Байназаров, У меня просто немного другая проблема, а именно в том что если я сделал жест touchmove по хедеру(он не скролится например), то фокус сафари попадает на body, а у body стоит fixed и height:100 что не позволяет ему скоролится. И получается что скролл полностью мертвый, и приложение выглядит как зависшее, пока ты снова не тапнишь чтобы был корректный фокус

[Rustam Bainazarov]

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

Я просто привел пример иной проблемы Safari, которой и близко нет в иных браузерах. Safari косой браузер, мне он не нравится.

Решения вашей проблемы я не нашёл нормальной. Если у вас есть хоть какой-то костыль, то вы пришлите, пожалуйста.

[webfln]

Рустам Байназаров,
> -webkit-overflow-scroll: touch вообще глючная штука, которая плохо работает с fixed и transform.

Да, но по другому моего ожидаемого поведения никак не достичь

[Rustam Bainazarov]

webfln, понимаю, иных решений нет. Мне интересно, что вы придумали в сочетании с JS.

[webfln]

const preventScrollOnMobile = e => {
  if (!e.target.closest('#Scrollable')) {
    e.preventDefault();
  }
};

document.addEventListener('touchmove', preventScrollOnMobile, { passive: false });

Решает проблему с фризингом, но не всегда

[Rustam Bainazarov]

webfln, опа, спасибо, попробую!