ScrollSmoother for whole sites? Trying to figure out it's usefulness.

[cheestudio]

Hey all,

 

This is a general question: I attempted to use the ScrollSmoother for a site, but I am curious if that was not it's intended purpose? Because whenever there was a height change for any reason, such as an FAQ module expanding content on a page, the ScrollSmoother's wrapper did not update the height. I realize I could call ScrollTrigger.refresh() after those events, but they won't always be in my control to know if those events are occurring (ie.. client installs a WordPress plugin that adds some kind of feature involving dynamic content). 

 

Which got me thinking: perhaps I am misunderstanding the use of ScrollSmoother? Is it not meant to be something that controls the experience of a site's scroll? And if not....what is meant for? I would find it odd if only a section or animation of a site was smooth and the rest of the site "standard", and wrapping an entire site with it didn't seem like it was sustainable. 

[Cassie]

Hey there - thanks for being part of Club GreenSock. 💚

No, you're quite right. It is for Smooth Scrolling (not sure what else it would be for), but it is up to the developer to to refresh after events that change the DOM length

If you can't - leveraging resize observer to listen for changes may be an option?

https://caniuse.com/resizeobserver

See the Pen ZErVoLq?editors=1111 by GreenSock (@GreenSock) on CodePen

 

Hope this helps!

[cheestudio]

Haha, well yes, I knew it was for scroll smoothing! 😆 Clearly I wasn't phrasing my question well. It was more about why someone would smooth the scroll of just a "part" or section of a page, rather than the entire page itself. But if you apply it to the entire page, you're now suddenly in charge of having to listen for events that could change the DOM length.

 

But holy wow, how have I not heard of ResizeObserver before?! And browser support is really decent. Thank you, Cassie!! Do you think this is problematic from a performance perspective?

 

[Cassie]

From MDN - looks to be a performant solution to constantly checking bounding clients.
 

Quote

The Resize Observer API provides a performant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.

 

https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API

 

Glad it helped!