Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
grommas

ScrollTrigger: Normalize scroll on custom scroller

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

Hi grommas,

 

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

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

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:

 

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

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

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