normalizescroll ScrollTrigger: Normalize scroll on custom scroller

[Grommas Dietz]

Hey there

 

Thanks for all your tools, the updates and new features. Really appreciate and love to work with it!

 

Is it possible to normalize scroll on custom scrollers in future releases of ScrollTrigger? Currently the normalisation only works for the overall page, similar to ScrollSmoother, right?

 

The CodePen provided is just a quick test in reference. Comment out ScrollTrigger.normalizeScroll(true); to see how it breaks the scrolling.

See the Pen wvpyvGX by grommas (@grommas) on CodePen.

[OSUblake]

Hi grommas,

 

normalizeScroll works with the main window scroller. Is there any reason you are trying to do it on individual scrollers?

[GreenSock]

I'm experimenting with adding that capability in the next release (no promises ) - here's a fork that uses an early beta version. Is this what you wanted? 

See the Pen KKZQxmd?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

To be clear, this does NOT do any kind of normalizing of the nested scrollers - it merely allows the native scroll behavior on those. So the normalizeScroll() is only affecting the root/body/document.scrollingElement. 

[Grommas Dietz]

Thank you both for the answers, looks already promising that allowNestedScroll: true makes nested scrollers scrollable again. It’s not quite what I was looking for but this option makes it much more useful in cases of native scroll-snap galleries etc.

 

@OSUblake: I was trying to fix pinned elements inside a set of multiple scroll containers. Pinned elements jitter in safari and position: sticky did not work in that specific case.

 

@GreenSock: Would it be possible to normalize the scroll for nested scrollers or is this blowing up the code and the performance too much? I can imagine that it’s a downgrade to always bubble up the DOM to find the active scroller. It’s kind of annoying that Safari is the main cause, but since it’s one of the major browsers it would be a great benefit.

[GreenSock]

20 hours ago, grommas said:

Would it be possible to normalize the scroll for nested scrollers or is this blowing up the code and the performance too much? I can imagine that it’s a downgrade to always bubble up the DOM to find the active scroller. It’s kind of annoying that Safari is the main cause, but since it’s one of the major browsers it would be a great benefit.

At this point, that isn't something we're pursuing as I think you're right - it would blow up the code and performance a bit. Never say never, but for now it's not in the cards. I'm curious about the "why" here - most browsers only use a different thread for scrolling the root/body/document.scrollingElement so sub-scrollers shouldn't cause too many problems. Are you seeing jitter or something? A minimal demo would be super useful. 

 

And yeah, I'm not loving the work involved with checking the event.target and traversing the ancestor tree to see if it's inside a scrollable container but I implemented some caching so it only does that check every 2 seconds because I figured it's highly unlikely that an element would switch from scrollable to not scrollable in this context very often. So that keeps performance pretty peppy. ?

[Grommas Dietz]

Thanks for your thoughts! The demo I provided already shows the jittering in MacOS Safari (tested with version 15.4).

Here a short video of the jittering:

 

[GreenSock]

@grommas ah yes, some browsers still handle those scroll event paints on a different thread. Okay, so I'm experimenting with making it possible to normalize the scrolling of a particular <div> like this: 

ScrollTrigger.normalizeScroll({ target: ".vertical-1" });

Seems to work relatively well from my early tests - would you mind hammering on it? Here's the beta file of ScrollTrigger with this capability: 

https://assets.codepen.io/16327/ScrollTrigger.min.js

[Grommas Dietz]

At the first look it seems to work quite good for an isolated scroller in macOS Monterey 12.3.1 and Safari 15.4. But there are some jumps on iOS 15.4 (Safari, video attached).

 

While working with an isolated scroller, it does not work well with multiple nested scrollers. With allowNestedScroll: true and target: ".vertical-1" it gets stuck inside the targeted scroller. When targeting .vertical-2 it is possible to scroll to the 2nd container, but we get stuck to the targeted container again as soon as we get there.

 

Is it possible to target more than one scroller?

 

Thank you for your investigations, really appreciate!

[Grommas Dietz]

On 4/10/2022 at 9:54 PM, GreenSock said:

[…] Okay, so I'm experimenting with making it possible to normalize the scrolling of a particular <div> like this: 

ScrollTrigger.normalizeScroll({ target: ".vertical-1" });

Seems to work relatively well from my early tests - would you mind hammering on it? […]

Working on another project I run into another scenario where it’s necessary to switch the target. After resetting the target option, the scrolling speed gets faster on each switch within my early tests. Is there already a way of solving this issue or will it be possible to change the target in future versions?

[GreenSock]

3 hours ago, grommas said:

Working on another project I run into another scenario where it’s necessary to switch the target. After resetting the target option, the scrolling speed gets faster on each switch within my early tests. Is there already a way of solving this issue or will it be possible to change the target in future versions?

Hm, got a minimal demo? 

 

Did you kill() the old normalizer? Or are you trying to have it normalize two totally different targets simultaneously? 

 

Try this: 

// save the instance so we can kill() it later...
let normalizer = ScrollTrigger.normalizeScroll({...}); 
                                                
// then later, kill() it:
normalizer.kill();

// and then create your new one...
normalizer = ScrollTrigger.normalizeScroll({...});

 

[Grommas Dietz]

Question number one and your example make perfect sense, thank you!

[Bhavin]

I am still waiting for scroll trigger normalization any update actually its allownestedscroll:true gives inappropriate results like when scrolling its its directly clicking that content or buttons or divs... Yes and i handle it through counting x and y position and try to setting it true based on conditions so its work fine for Android but for iOS you know they return scroll position as rounded (not float). So its also problematic in IOS.    thats why waiting for new update

[Rodrigo]

Hi @Bhavin and welcome to the GSAP Forums!

 

Do you have a minimal demo where we can check what could be the issue. This thread is almost two years old and a few updates have been included in ScrollTrigger and normalize scroll method as well, so it would be great to see the specific setup you have that is causing issues.

[Bhavin]

On 9/10/2024 at 10:21 PM, Rodrigo said:

Hi @Bhavin and welcome to the GSAP Forums!

 

Do you have a minimal demo where we can check what could be the issue. This thread is almost two years old and a few updates have been included in ScrollTrigger and normalize scroll method as well, so it would be great to see the specific setup you have that is causing issues.

i already seen everything but i am trying to fixing the issue related address bar in mobile browser hiding or showing in scroll up and down and it affecting by scrolltrigger top and bottom positions as well as viewport size. and i have snap to effects also in pinning so its doing strange behavior so i used scrolltrigger.normalizescroll with its passing object in it like allownested scroll and do so many logic also to allow nested scroll pass only on horizontal scroll because its directly clicking to my a tags when scrolling but i solved all that. and its working fine now for android but it has problem for IOS. yes i got IOS issue because IOS doesnt give float value for x and y scroll positions its give absolute or rounded values so its dont working fine for allowing my nested scroll too.   so i can't use scrolltrigger.normalizescroll for IOS is there any other option to do work it in IOS.???

[Rodrigo]

@Bhavin this has been addressed in this thread:

 

Please refrain from creating duplicated threads or posting in many different threads. We understand the frustration but we do our best to answer within 24 hours to all the threads in the forums, so you'll get an answer, sometimes you'd have to be a little more patience.

 

Happy Tweening!