Jump to content
Search Community

ScrollSmoother with normalizeScroll: true + overflow-y: scroll

matashaEs test
Moderator Tag

Recommended Posts

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

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

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

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
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

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