Как реализовать поэкранный скролл блоков при 100vh?
Всем привет. Суть проблемы:
- Структура проекта: .header .block1 .block2 .footer. Необходимо растянуть .header и .block1 на всю высоту экрана и скролиться между ними поблочно (достаточно точный пример https://projects.lukehaas.me/scrollify/).
- Проблема: при реализации через jquery и scrollify есть определенный баг на мобилках, когда секция подпрыгивает или не пролистывается до конца в секциях где есть остаточный контент. К тому же jquery и scrollify сильно сказывается на оценке pagespeed роняя её на 20%. Аналогичные библиотеки тоже используют jquery, но я хотел бы отказаться от него вообще, так как структура проекта его не подразумевает (я уже использую библиотеку MoveTo, Swiper, Overlayscrollbars). Реализация же на чистом js пока не найдена и вариант реализовывать через Swiper сомнительна, тогда не будет сочетания с Overlayscrollbars и исчезнет кастомный скролл, который я отключать не планирую. Реализация через библиотеку FullPage не подходит - реализовываю коммерческий проект и код не является открытым.
В идеале решить этот вопрос менее затратным способом, возможно есть способ уйти от Overlayscrollbars и реализовать кастомный скролл в библиотеки с подходящим api, но пока не нашел подходящую либу. Либо же возможно реализовать данную прокрутку самостоятельно через JS Vanila. Если нет, буду благодарен за библиотеку для чистой реализации данного функционала или подсказки как исправить потерю оптимизации при использовании jquery. Спасибо.