Как в определенном месте страницы отключить скролл страницы и скролить определенный блок?

Question

[Алексей]

Есть страница сайта, при скроллинге страницы каждый блок плавно появляется. Когда в зону видимости пользователя попадет определенный блок, то при дальнейшей попытке прокрутить страницу, все должно остаться на месте за исключение содержимого данного блока, которое плавно сменится одно на другое и так до тех пор пока весь контент блока не будет показан, далее страница продолжает скроллиться в стандартном режиме. Точно так же в обратном порядке. Как правильно это называется, и как добиться такого эффекта? В гугле не смог найти инфу, тк даже не знаю как правильно составить запрос)

Comments

[Максим]

У меня пока ума не хватает отследить scroll у внутреннего блока и по окончании вернуть scroll родителю: https://codepen.io/topicstarter/pen/gOjEPOo
время если будет повожусь

Answer 1

[IIIu6ko]

Скролл не отключается в таких решениях. Пользователь по прежнему продолжает скроллить, просто в определённый момент нужный блок зависает и с помощью transform двигается влево/вправо имитируя горизонтальный скролл.

Вот хороший пример gsap + scrolltrigger


Можешь погуглить gsap scrolltrigger horizontal scroll