Sukru Posted May 2, 2023 Share Posted May 2, 2023 Hello, I added simplebar js to my ongoing project to customize the scrollbar, but there is a conflict. I think the styles come when gsap is disabled, but the simplebar styles do not work when gsap is active. Can you help me? See the Pen LYgbPXB by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 2, 2023 Share Posted May 2, 2023 Hi there, When you're using ScrollSmoother it's the wrapper element that is the scroller, not the body. From the simple scrollbar docs Quote Auto-binding Include the attribute ss-container in any <div> that you want to make scrollable, and the library will turn it for you So this should work! See the Pen abRLKGP by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Sukru Posted May 2, 2023 Author Share Posted May 2, 2023 @Cassie I am using gsap version 3.11.4. In this version I use scrollsmoother and the html structure; <div id="smooth-wrapper"> <div id="smooth-content"> </div> </div> There is no scrollsmoother you shared. The gsap version I used was conflicting with the plugin you provided. I tried many times. Because both offer smooth scrolling feature. gsap version 3.11 offers a lot of usefulness, I didn't want to give up on it. So I just searched for the scrollbar style. Link to comment Share on other sites More sharing options...
Cassie Posted May 2, 2023 Share Posted May 2, 2023 Oh sorry I had the wrong link on my clipboard - edited Link to comment Share on other sites More sharing options...
Sukru Posted May 2, 2023 Author Share Posted May 2, 2023 @Cassie Thank you, Now the smooth scrolling feature is disabled, I wanted both. Are both soft scroll and scrollbar style both the same terms not working? Link to comment Share on other sites More sharing options...
Rodrigo Posted May 2, 2023 Share Posted May 2, 2023 Hi, Indeed it seems that for some reason SimpleBar doesn't work the way is expected when combined with ScrollSmoother. As you can see SimpleBar is adding a lot of stuff around the elements ScrollSmoother uses to create the effects: https://i.imgur.com/wyDuECq.png Unfortunately SimpleBar is not a GSAP product and we can't offer support for third party plugins and packages in these free forums. Good luck with your project! Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 2, 2023 Share Posted May 2, 2023 Here's some other options Roll your own - See the Pen eYpOXYO by GreenSock (@GreenSock) on CodePen This thread discusses CSS styling https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/ 1 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