jackkemm Posted February 27, 2023 Share Posted February 27, 2023 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 More sharing options...
Rodrigo Posted February 27, 2023 Share Posted February 27, 2023 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 More sharing options...
GreenSock Posted February 27, 2023 Share Posted February 27, 2023 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 More sharing options...
jackkemm Posted February 28, 2023 Author Share Posted February 28, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now