Как при скроле Y оси вниз у body скролить X элемента и фиксировать body scroll пока не закончится скрол у X?

Question

[Raymont]

как реализовать подобное:

spoiler

Есть картинка, и необходимо при скролле по Y у боди скролить X у этой картинки и фиксировать scroll body у section(то есть он не скролится вниз пока x картинки не достигнет 100% и только потом продолжать scroll у body).

Как это можно сделать? в идеале на чистом js. есть плагин? библиотека? готовое решение? какие-то идеи как это сделать?

Comments

[goshaLoonny]

Evgenii, мне не составляет труда прочитать и понять суть вопроса. Возможно дело в читающем, в данном случае в вас.

Answer 1

[goshaLoonny]

Используйте position: sticky когда пользователь начинает скроллить на контейнере и обрабатывайте скролл уже через js

Comments

[Raymont]

не совсем понял, как именно в данном случае использовать sticky и обрабатывать скролл.
есть какой-то пример?
Еще раз спасибо!

[goshaLoonny]

Raymont, примера нет, но последовательность действий простая. Когда пользователь доходит до нужной части страницы или когда начинает скролить на элементе (это уже решайте сами) вы добавляется position: sticky, а дальше обрабатываете прокрутку и прокручиваете контейнер по оси X попутно проверяя не закончился ли скролл в этом контейнере и не пора ли отдать управление обратно. Как только закончили - возвращаете управление и убираете position: sticky с элемента

[goshaLoonny]

Raymont, постараюсь сделать пример когда освобожусь