Головная боль, которая началась вместе с выходом iOS 15.
Резкое прокручивание при скрытие тулбара Safari при открытом боковом бургер-меню, и такой же быстрый скролл после отображения этого тулбара.
Решение: библиотека body-scroll-lock.
Библиотека блокирует все скроллы, кроме того что вам нужен в данный момент (например по событию открытия Попап, или открытия бокового меню, как это было в моём случае - см. видео пример ниже).
Обратите внимание: Прочитайте этот ишью перед использованием: https://github.com/willmcpo/body-scroll-lock/issues/236. Главное, что там сказано: то что баг со скроллом не уйдёт в Safari, если установить библиотеку через NPM, а если качать с GitHub всё будет ОК.
Видео пример
- До использования библиотеки (боль):
https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/before.MP4
- После:
https://truewebstories.ru/sites/default/files/0my_files/blog/2022/scroll-safari-15/after.MP4
Я блокирую скроллинг всего кроме "бургер меню" (бокового меню), после того как это меню открыли.
Когда меню закрывают - все блокировки скроллинга снимаются.
Спасибо willmcpo за это.
Второе гениальное решение
Использовать touch-прокрутку на JS (без CSS: overflow: auto и подобных).
Например, посмотрите на библиотеку: flickity - у неё есть режим: freescroll.
https://flickity.metafizzy.co/options.html#freescroll
Настоящий обман Safari: она не догадается, что мы что-то скроллим.
