JavaScript - temporarily pause page scrolling but keep scrollbar scrolling until unpaused

933 Views Asked by At

I am trying to achieve an effect similar to on this website here: https://www.wokine.com/en/ where you scroll down and the 'HELLO' text moves to the side. I have done that part, but I am stuck on how to pause the page from scrolling after that but still, keep the scrollbar moving. I need this to happen so I can use jquery to re-enable scrolling after the user scrolls down to a certain point.

The link explains it a bit better than I can with words.

1

There are 1 best solutions below

1
On

Page scrolling is never paused or disabled is just a "trick"

Let the 'HELLO' element be fixed positioned until scrolling reach the point where you want the element to start moving up.

During the first stage ('HELLO' fixed) you can detect page scrolling and perform animation on the element.

Second stage, when you want 'HELLO' start scrolling, switch its positioning to absolute (or relative) and at the same time set its vertical position top at the same coordinate the page has been scrolled to (window.scrollY)