ScrollTrigger + Smooth-Scrollbar : Body goes bigger when some elements are more than 100vw

[Maxouingue]

Hi everyone,

 

After many hours of searching, I finally ask here for my problem. (Not native English, sorry in advance). I try to use Smooth-scrollbar and a Scrolltrigger on an element who has 200 vw in size and which will translate over X axis. The problem is that the smooth-scrollbar applied on the body increase the width of the body (I tried with overflow: hidden on body but doesn't work) 

 

Any idea ? 

See the Pen LYOzMYL?editors=1111 by Obamax (@Obamax) on CodePen

[OSUblake]

Hi Maxouingue,

 

Smooth-scrollbar is not a GSAP product, so if you're having issues with it, you should direct your questions over to their support.

 

 

[Maxouingue]

Hi OsuBlake,

 

Sorry to ask, but like this screen with Locomotive-Scroll, the main intention was to find people who has already met this problem. I totally understand that GSAP does not offer 3rd party support. And basically I think it strange that GSAP use these librairies like here https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() and you gave me the answer that "That is not GSAP, go ask to Smooth-Scrollbar". 

I don't want to be offensive or else. I'm just a bit confused by your response

[OSUblake]

In the scrollerProxy docs, it does say this...

 

Quote

GreenSock doesn't recommend or endorse any particular smooth scrolling library - the demos below are based on various forums posts.

 

Those demos are just meant to show how to connect ScrollTrigger to another scroll controller. The only one we can really offer support for is the native ScrollTrigger one because we wrote that.

 

See the Pen gOgWELo by GreenSock (@GreenSock) on CodePen

 

And anyone is free to jump in and answer any questions related to 3rd party libraries on this forum, and that happens a lot, but mostly for Locomotive Scroll. My comment is more to manage your expectations as you might not get an answer when something concerns a 3rd party library.

 

If I knew what the issue was, I would have given you a solid answer, but I'm not familiar with it, and as far as I can tell the issue is completely related to smooth scrollbar. If I remove all the ScrollTrigger code it still has the overflow. 🤷‍♂️

 

See the Pen eYeepaY by GreenSock (@GreenSock) on CodePen

 

 

[akapowl]

Hello Maxinogue,

 

here's a link to smooth-scrollbar's API documentation

 

https://github.com/idiotWu/smooth-scrollbar/blob/2ef4fcead7bbe765af56da459280ea2c1871c2dc/docs/api.md

 

This is the part you'll want to take a look at in particular:

 

https://github.com/idiotWu/smooth-scrollbar/blob/2ef4fcead7bbe765af56da459280ea2c1871c2dc/docs/api.md#scrollbartrack

 

 

As the example in that section shows, you have some options to do things to the xAxis-track, so you'll likely want to call

 

bodyScrollBar.track.xAxis.element.remove();

 

at some point to make it not appear (probably alongside an overflow-x: hidden on the body)

 

Edit:

Also here is a link to an issue on the GitHub page of smooth-scrollbar showing that at some point it was even suggested to do it something like that by the creator of smooth-scrollbar.

 

https://github.com/idiotWu/smooth-scrollbar/issues/206

 

 

See the Pen bGYYEbQ?editors=1010 by akapowl (@akapowl) on CodePen

 

 

 

 

[Maxouingue]

Hi everyone,

 

@OSUblake Sorry for maybe being unkind by the way I formulate my answer. I didn't see this part.
 

@akapowl Thanks for your response, unfortunately this does not fix the problem. If you use a pad or maybe a Magic Mouse on Mac you'll discover that even with  

bodyScrollBar.track.xAxis.element.remove();

You still can scroll horizontally. 

 

But still thanks for you two for taking the time to answer to me.

[akapowl]

 

I just now noticed when viewing it on mobile that you can still scroll horizontally in your example.

 

Well it's likely something with how you have to set things in the first place - but rather related to smooth-scrollbar or general CSS setup and not related to GSAP at all. I can not helpy you track down what exactly it is you have to change, but I do not have the same issues in an example with smooth-scrollbar on my codepen profile. Maybe you can use this as a starting point.

 

See the Pen xxqxaQE by akapowl (@akapowl) on CodePen