Jump to content
Search Community

stop the scroll

benoit test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
Share on other sites

  • 1 month later...
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 comment
Share on other sites

  • 4 years later...

@Ishav, if you'd like some help, please create a new thread rather than posting in one that's 4 years old.

 

Also, It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
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.
×
×
  • Create New...