Jump to content
Search Community

ScrollSmoother with Safari resize strick

jackkemm test
Moderator Tag

Recommended Posts

Hi there,

 

I am wondering if there's a way to make ScrollSmoother work with the iOS Safari resize trick here https://greensock.com/docs/v3/HelperFunctions#scrollResize

 

I noticed ScrollSmoother adds a height to the body which is how the scrolling works I assume? But in my case I am wanting to change the scrolling window to be a custom div on mobile to prevent the browser resize from occuring.

 

I have tried normalizeScroll but it's not so performant for our use case so was want to do the old school way.

 

In something like Lenis, you can decide the wrapper which has the overflow so it's pretty simple to choose what the target div is to scroll on.

 

In the attached Codepen, I have it set up to use the custom div by default, but in practise I will be using ScrollTrigger.isTouch to be able to use work out whether it is a touch device or not to use the default set up or the custom div set up.

 

If anyone can shed some light on this it would be much appreciated.

 

Thanks in advance.

 

Jack

See the Pen vYzyryK by jackkemm (@jackkemm) on CodePen

Link to comment
Share on other sites

Hi,

 

ScrollSmoother is made to work with the native scroll and not using some scroll hijacking mechanism. While the codepen you post does kind of work on Android and iOS it doesn't work on desktop (Chrome and Firefox on Ubuntu 20 & 22).

 

3 hours ago, jackkemm said:

I have tried normalizeScroll but it's not so performant for our use case so was want to do the old school way.

I'm curious about this. What performance issue you're experiencing here? Can you share a minimal demo that shows this performance problem you're referring to?

 

Happy Tweening!

Link to comment
Share on other sites

Yeah, once you use a custom scroller (rather than the <body>/<html>), that presents various various problems due to the way CSS works and browsers won't synchronize between the scrolling thread and main JS thread. The reason that seems easier with Lenis is because [from what I understand] that only applies smoothing to wheel events. So, for example, if you drag your scrollbar or hit the spacebar or use arrow keys to scroll, no smoothing will be applied whereas ScrollSmoother does it for ALL methods of scrolling. I'm not knocking Lenis at all - I'm just saying they fundamentally work differently. ScrollSmoother leverages native scroll on the <body> but uses that to apply transforms to your content inside a wrapper that's position: fixed. So the entire approach is VERY different. There are pros and cons to each. Each requires tradeoffs. It sounds like what you're trying to do with that "resize trick" is one of the tradeoffs/limitations inherent in this technique. 

 

Does that clarify things? 

Link to comment
Share on other sites

Hi both,

 

Thanks for the replies!

 

Hi @Rodrigo, in regards to normalizeScroll, I have tested on Codepen numerous times with minimal set ups and it all works fine. However, in a site I am buildig it does tend to lag noticeably on mobile, and the main feature I am after, stopping the address bar from shrinking isn't always consistent, but as I've seen in previous forums, using normalizeScroll isn't the answer for everyone!

 

Hi @GreenSock, yes 100% does clarify thank you! I plan to keep testing on future projects and hopefully get it working more consistently on mobile devices!

 

Thanks,

Jack

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...