@nazar-lynovetsky

Как правильно реализовать интерфейс с блокированием скролла?

Ссылка на пример реализации.

На странице по ссылке (в середине страницы) есть секция с названием "What we do". Посмотрите на работу этого интерфейса. Он работает так:

- Мы скроллим body до секции What we do.
- На секции What we do блокируется скролл на body.
- Внутри секции мы можем скроллить внутренний контейнер при заблокированом скролле на body.
- После того как мы проскроллили весь внутренний контейнер секции What we do - разблокируется скролл body и мы можем скроллить всю страницу целиком дальше.

Как это сделать? Возможно уже есть готовые решения?
  • Вопрос задан
  • 130 просмотров
Решения вопроса 2
sniggering_deus
@sniggering_deus Куратор тега CSS
Dance Gavin Dance - Prisoner
Самый простой вариант - открыть инструменты разработчика, и узнать что же отвечает за этот эффект.

На сайте в примере используется библиотека scrollama. Есть ещё такой вариант, но точно не уверен что эта библиотека способна реализовать подобное. Хотя данного эффекта можно добиться без каких-либо дополнительных библиотек. Достаточно манипулировать IntersectionObserver и position: sticky.
Ответ написан
@nazar-lynovetsky Автор вопроса
Для реализации подобного поведения используется библиотека Scrollama.
Ссылка на сорс: https://github.com/russellgoldenberg/scrollama
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 сент. 2020, в 01:42
5000 руб./за проект
28 сент. 2020, в 22:46
1500 руб./за проект
28 сент. 2020, в 22:42
5000 руб./за проект