GRG Posted December 16, 2022 Share Posted December 16, 2022 Hello I am trying to create a SmoothScroller content page that also has a SmoothScroller sidebar. So far in my tinkering, it seems that when SmoothScroller is initialized it creates one scroll element that is active on the whole page and limits all other instances. Smooth Scroller even seems to censor any other regular non-SmoothScroller scrolling element. Is it possible to create this? Thank You! Link to comment Share on other sites More sharing options...
Rodrigo Posted December 16, 2022 Share Posted December 16, 2022 Hi, Can you provide a simple minimal demo for this? Is impossible to know exactly what the issue could be with the description and image you provided. Happy Tweening! Link to comment Share on other sites More sharing options...
GRG Posted December 16, 2022 Author Share Posted December 16, 2022 Here is a quick demo link: https://stackblitz.com/edit/nuxt-starter-8camca?file=app.vue Thank you for your help! Link to comment Share on other sites More sharing options...
Rodrigo Posted December 16, 2022 Share Posted December 16, 2022 Hi, Yeah I don't know how feasible is to have two different ScrollSmoother instances at the same time. My guess is no, but I'll ping @GreenSock so he can clarify the subject. ScrollSmoother works with the native scroll bar from the body element (that's why is recommended that the content should be inside the body tag) and you have a very intricate setup with quite a few Flex elements with flex grow applied to them which makes their heights 100% of the view port, hence there is no native scroll on the body element. If you want a fixed sidebar on your site, you should follow the recommendations of the ScrollSmoother docs for setting up your code: <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> I think that unfortunately you can have a ScrollSmoother instance in your content but not on your sidebar. That depends on what Jack has to say about multiple ScrollSmoother instances in a single page. Please stand by. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted December 16, 2022 Share Posted December 16, 2022 You cannot have multiple ScrollSmoother instances on the same page - that wouldn't make any sense because ScrollSmoother is made to control the scrolling of the whole page. Link to comment Share on other sites More sharing options...
GRG Posted December 16, 2022 Author Share Posted December 16, 2022 Thank you for the quick response! I assume that it would not be feasible to have SmoothScroll sidebar and then a normal scroll content section? - or vise-versa Thank you again Link to comment Share on other sites More sharing options...
Rodrigo Posted December 16, 2022 Share Posted December 16, 2022 1 minute ago, GRG said: I assume that it would not be feasible to have SmoothScroll sidebar and then a normal scroll content section? - or vise-versa It is possible. As mentioned before, just set one of them to be inside the Smooth Container element and the other as a direct child of the body tag with a position fixed applied to it: <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> If you ask me I'd go with the content as the ScrollSmoother child and keep the sidebar as a normal scroll or you can use a third party scroll plugin just for that. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now