matashaEs Posted October 20, 2022 Share Posted October 20, 2022 Hello🙂 I am creating a website in WordPress, where I have installed ScrollSmoother. To avoid iOS Safari bugs that occasionally cause jitter, I use normalizeScroll: true. But when I use it, overflow-y: scroll doesn't work, and the elements do not scroll as seen in my codepen. How to solve this problem? See the Pen ZEoZxWV by matashaEs (@matashaEs) on CodePen Link to comment Share on other sites More sharing options...
alig01 Posted October 20, 2022 Share Posted October 20, 2022 Hey, Â you need to allow nested scrolling. gsap.registerPlugin(ScrollTrigger, ScrollSmoother); const smoother = ScrollSmoother.create({ smooth: 3, effects: true, normalizeScroll: true, }); ScrollTrigger.normalizeScroll({ allowNestedScroll: true }) You could also try to set a target instead, to increase performance. ScrollTrigger.normalizeScroll({target: ".overflow-scroll__items"}); But my suggestions are not yet documented (or at least I couldn't find it), so take it with a grain of salt. However, if I'm talking nonsense, I'm sure someone will clarify it for both of us. Link to comment Share on other sites More sharing options...
GreenSock Posted October 20, 2022 Share Posted October 20, 2022 Yep, you could do: const smoother = ScrollSmoother.create({ smooth: 3, effects: true, normalizeScroll: {allowNestedScroll: true}, }); Or just set it directly like this: ScrollTrigger.normalizeScroll({ allowNestedScroll: true }) (either way works)  I would NOT suggest using that "target" suggestion from @alig01 since that is indeed an undocumented property and it serves a very different purpose  We totally appreciate you chiming in with your suggestions, @alig01! 🙌 The vast majority of your answers/suggestions are exactly correct and very helpful. Keep it up. 💚 2 Link to comment Share on other sites More sharing options...
mainello Posted October 30, 2022 Share Posted October 30, 2022 this isn't working when height is set on the root and body element with scrolltrigger only: Â see my pen:Â See the Pen VwdvaRj by davidbwaters (@davidbwaters) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted October 30, 2022 Share Posted October 30, 2022 That seems like a very odd thing to do. I'm curious why you'd set things up that way, @mainello. Â You could just add this:Â document.body.addEventListener("wheel", e => e.stopImmediatePropagation()); document.body.addEventListener("touchstart", e => e.stopImmediatePropagation()); Â Link to comment Share on other sites More sharing options...
mainello Posted November 8, 2022 Share Posted November 8, 2022 On 10/29/2022 at 8:30 PM, GreenSock said: That seems like a very odd thing to do. I'm curious why you'd set things up that way, @mainello.  You could just add this: document.body.addEventListener("wheel", e => e.stopImmediatePropagation()); document.body.addEventListener("touchstart", e => e.stopImmediatePropagation());  I usually start with boilerplate css to set the body and root height so children can inherit. I was just pointing out because it's inconsistent with native behavior and no obvious way to debug. It took forever for me to figure out this was the cause. 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