Горизонтальная прокрутка липкого участка

Question

На веб-сайте, который я создаю, я бы хотел разместить горизонтальную секцию прокрутки position: sticky; в середине страницы. Страница имеет вертикальную прокрутку. Пользователь может прокрутить раздел от А до Я с помощью вертикальной естественной прокрутки страницы.

Я нашел прекрасный пример того, чего я хотел бы достичь: https://nlkyt.csb.app

Я не нахожу ресурсов по этому вопросу. Кто-нибудь знает, как создать такой эффект?

Спасибо!

Answer 1

Я искал подобный эффект, когда наткнулся на это сообщение в блоге . Подводя итог, вам нужно три контейнера, которые мы можем назвать:

1. space holder - Этот контейнер будет поддерживать пространство вертикальной прокрутки пространства. Подробнее об этом ниже.
2. sticky - этот контейнер будет иметь заданную высоту (100vh в моем примере). Он также будет position: sticky; top: 0;.
3. горизонтальный - этот контейнер будет содержать содержимое, на которое вы будете sh перемещаться по горизонтали. Его ширина будет определяться содержимым, которое он содержит.

Для достижения желаемого эффекта вы должны установить высоту "space holder" равной ширине "горизонтального". Затем при прокрутке вы должны перевести по горизонтали «горизонтальный», равный смещенной вершине «липкого».

Если вы используете реагирование, следуйте посту блога сверху. Если вам нужна ванильная javascript версия , посмотрите этот кодовый блок , который я сделал.