Jump to content
Search Community

ScrollTrigger: Normalize scroll on custom scroller

Grommas Dietz test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • 8 months later...
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?

Link to comment
Share on other sites

  • Solution
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({...});

 

  • Like 2
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...