Gsap Simplebar Plugin

[Sukru]

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

[Cassie]

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

[Sukru]

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

[Cassie]

Oh sorry I had the wrong link on my clipboard - edited

 

[Sukru]

@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?

[Rodrigo]

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!

[Cassie]

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/