Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
benoit

stop the scroll

Recommended Posts

Hi,

 

I try to stop the scroll during a tween. It's not work like I expect.
A text is hidden under a block (height:400px), when the scroll is at 400, this text is fading in 1s. I need a 1s disable scroll. Then scroll is working.

I try this :
https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

but it's look like the browser relaunch the velocity after enable the scroll.

See the Pen aqBgJZ by benoitwimart (@benoitwimart) on CodePen

Link to post
Share on other sites

Hi @benoit!

 

I'm not sure this is GSAP related at all... But I think I get what you are asking, correct me if I am wrong:

 

You want to stop the scrolling once you hit the height of the block element (400px in your example) for one second, then you want to enable the scroll back after that second.

 

As noted in the StackOverflow answer you have linked to: the scroll event cannot be cancelled. It will also mean, it cannot be interrupted, in another words, you can't stop the scrolling that is already happening. You will not be able to stop the scrolling window at the 400px mark and then continue after that.

 

The one thing I can think of is to snap the element on the position while the rest of the screen scrolls or, completely hijack the scroll right at the very start and force the user to scroll to your desired location.

 

I am afraid I am not versed in the dark arts of scrolljacking so, you will either have to search online for some tutorials or someone else might offer insights. @OSUblake's smooth scrolling thread might be a good start, also.

 

 

  • Like 3
Link to post
Share on other sites

See the Pen paRJXq by benoitwimart (@benoitwimart) on CodePen

My best combinaison in this codepen, but if I scroll/swipe quickly with my trackpad, it's stop then it's move (I don't know the name for this physic effect).

Link to post
Share on other sites

That's a good start.

 

From what I can see here, reading your code, it still is expected behaviour.

 

As mentioned before, you cannot stop the scroll, so, while the code works in the first scroll, as soon as you scroll again, the windown will naturally scroll as there's nothing preventing it. Even your if() statement inside the refreshScroll isn't doing anything at that point as you toggle the firstTime variable to false thus, that block of code inside the is statement no longer runs.

 

I am sorry I can't do much other than point issues out, I am a bit under other stuff at the moment and can't spare any time to try and tackle that myself.

 

My suggestion to you would be - following Blake's smooth scroll idea, to have your main element body fixed, listen to the scroll event and set a flag 'shoudScroll' then you toggle that flag true or false. While true you translate the fixed element up or down according to the scroll event, while false, you don't.

  • Like 4
Link to post
Share on other sites

Yes, thank you @Dipscom I will keep the idea from OSU for another update, if there is no quick trick. My last code on Android is not so bad.

  • Like 1
Link to post
Share on other sites

Well, this is a nice challenge. If I can find time (don't count on it) I'd love to tackle it.

Link to post
Share on other sites
3 hours ago, benoit said:

my hack is not really ok on Chrome mobile device due to auto-hidden address bar :( 

 

Yes, that's a problem because the element is fixed.

https://developers.google.com/web/updates/2016/12/url-bar-resizing

 

But the gap is at the top because the scroller moves in the opposite direction. Not sure how to fix at the moment. There might be a solution somewhere in here.

https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome

 

 

  • Like 1
Link to post
Share on other sites

I fixed it!
Just put a "position:fixed" on the transformed (TweenMax) element.

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×