В мобильном Safari проблемы с прокруткой, как решить?
Здравствуйте, подскажите как решить проблему с прокруткой в мобильном сафари.
На странице есть слой перекрывающий страницу на весь экран со своей прокруткой, для плавности прокрутки этому слою добавляю -webkit-overflow-scrolling: auto; из-за неё возникает проблема. Когда у слоя scrollTop=0 и пытаешь скролить выше прокрутка переходи на body. хотя у body нет прокрутки. Как это запретить? Из-за этого фокус со слоя теряется и когда пытаешь скролить, контент в слое зависает, так как скролится body. Так же из-за этого возникает проблема с кнопками, приходится нажимать их два раза, первое нажатие возвращает фокус на слой.
В хроме есть overscroll-behavior: contain; который позволяет запретить скролл других слоев родителей, если скрол завершается а пользователь дальше скролит.
Можете использовать fix-scroll библиотеку для работы с нативным скроллом.
Так же прочитайте секцию Preventing, там описана проблема и решения со скроллом в iOS.
fix-scroll — на демо примере этот баг присутствует, при этом сверху поправили баг (решени такое можно взять из комментариев в ответе у Anton fon Faust), а снизу поправить у них руки не дошли)
fl3nkey, откройте модальное окно и прокрутите до конца, сделайте паузу, и опять прокрутите в эту же сторону. Сафари из-за того что кончилась прокрутка, перекидывает на body и пытается его скролить, остюда теряется фокус от модального окна и когда уже пытаешься прокрутить вверх нужно делать два нажатия, первое возвращает активность окна, и только потом можно продолжить крутить
RomanSS, опубликовал новую версию библиотеки, можете попробовать на своем проекте. Так же можете изучить исходники и попробовать реализовать своё решение)
fl3nkey, ааа, это ваш код) Ну в целом решение имеет право на жизнь, посмотрел код и проверил, в принципе вроде все норм. Но я всё же ищу решение без js, поэтому и не указал в тегах "javasrcipt". А пока сам остановился на подобном решении, только немного по другому реализовал, но суть та же.
RomanSS, без js к сожалению никак. Есть вариант с position: fixed; у тега body, но при этом теряется scrollTop (сводится к 0), и страница прокручивается на самый вверх.
Когда показываете свой перекрывающий слой, отключайте скроллинг для боди.
Или для body, когда показываете свой перекрывающий экран, ставьте position: fixed - и скроллинга не будет)
Скролинг все равно присутствует. Неважно есть полоса прокрутки или нет полосы у боди, и не важно какой position: fixed или absolute. у меня для боди сейчас стоит overflow: hidden; position: fixed; top: 0 bottom:0; left:0; right:0; Она убрала прокрутку, но я про другой косяк, когда находишься сверху или снизу, и пытаешься прокрутить, а прокрутке уже идит некуда, он перекидывает прокрутку на body, хотя у боди нет прокрутки. Можно глянуть на примере того же appla.com если нажать на меню (главное чтоб меню было с прокруткой) и прокрутить до конца, а потом сделать паузу, и опять попытатся прокрутить внизу, фокус уйдет на боди, и если уже пытаться прокрутить на вверх не получится.
отключение скроллинга это переназначаете обработчик события скролл, а не прятки элементов интерфейса.
Попробуйте поскролльте body у которого position: fixed - у вас ничегошеньки не получится.
Anton fon Faust, вы пробовали на сайте appla отловить глюк? Вот как отловите, поймете о чем я говорю. А сейчас вы говорите про стандартную проблему скрола.
Anton fon Faust, https://codepen.io/anon/pen/QmNLBM это то модальное окно которое вы предлагаете сделать мне для решения проблемы? Если да, то в нем есть косяк именно в сафари, который можно отловить
Anton fon Faust, сейчас я так и делаю при onTouchStart если scrollTop = 0; делаю scrollTop = 1; это помогает, он не может докрутить до нуля. Тем самым блокирует переход на body. Хочу найти решение лучше, чтоб избавится от дерганье в 1px
Попробуйте библиотеку body-scroll-lock. Ко всему прочему блокирует исчезновение тулбара при скролле в Safari на iOS 15.
Прочитайте этот ишью перед использованием: https://github.com/willmcpo/body-scroll-lock/issues/236. Главное, что там сказано: то что фича со скроллом не уйдёт в Safari iOS 15, если установить библиотеку через NPM, а если качать с GitHub всё будет ОК.
Простой
Средний
