Scrollable area on a page with ScrollSmoother

[Oleh_Rusyi 0 Likes (Newbie)]

Hi there. Can I have a scrollable container on a page that has ScrollSmoother initialized?
Scrolling inside such containers (that have overflow: auto ) translates to the whole page scroll.

[OSUblake 18,495 Likes (Superhero)]

Welcome to the forums @Oleh_Rusyi

 

Can you make a minimal demo showing that? And you are you using normalizeScroll?

 

[Oleh_Rusyi 0 Likes (Newbie)]

See the Pen jOYRwaK by rusyioleh (@rusyioleh) on CodePen

[OSUblake 18,495 Likes (Superhero)]

Currently normalizeScroll does not support nested scrollers, but it's something we're investigating. For now you'll just have to disable that feature.

 

ScrollSmoother.create({
            content: "#smooth-content",
            wrapper: "#smooth-wrapper",
            smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
            effects: false, // looks for data-speed and data-lag attributes on elements
            // normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies
            smoothTouch: 0,
        })

 

[Oleh_Rusyi 0 Likes (Newbie)]

 Thank you. It's great that we have a smooth scroll feature in gsap, well done 👍 

[intothebreach 6 Likes (Newbie)]

Hi - this is still a bit of a sticking point for us, as the normaliseScroll function is so useful, disabling it because we have a scroller on the page seems to be un-optimal.

 

Is there a different workaround that we could explore?

Cheers

 

[GreenSock 18,591 Likes (Superhero)]

Sure, @intothebreach - have you tried setting allowNestedScroll: true in your config? 

ScrollTrigger.normalizeScroll({allowNestedScroll: true});

 

[intothebreach 6 Likes (Newbie)]

Thanks Jack! That works nicely, you're a star.

Out of interest is this in the docs at all? Couldn't find it myself.

[GreenSock 18,591 Likes (Superhero)]

Sorry about the confusion there, @intothebreach - it was a "hidden" feature for a while. We were deciding if we should expose it in the API or not, but it has proven itself to be very useful so we're making it official now. It's in the docs. 👍