When using scrollWidth as value for scrollTrigger, it doesn't count for element's padding

[kohlej]

Hi guys, here is simple demo of me using scrollWidth of element - clientWidth to show whole .roller__inner on scroll.

However it's not showing the right padding of .roller__inner as it should. (As far as I know scrollWidth takes padding into the value)

Anyone can help with this?

See the Pen mdRYmpO?editors=0010 by kohlej (@kohlej) on CodePen

[akapowl]

 

Hey @kohlej

 

I'm pretty sure, ScrollTrigger is interpreting things correctly there.

Your problem is more CSS-layout related.

 

You can see that when you comment out all your JS and remove the overflow-x: hidden from your roller, that things are not set up the way you might think in the first place. So you might want to tweek your setup so it displays as wanted first before hooking it up to ScrollTrigger.

 

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

 

[kohlej]

6 minutes ago, akapowl said:

 

Hey @kohlej

 

I'm pretty sure, ScrollTrigger is interpreting things correctly there.

Your problem is more CSS-layout related.

 

You can see that when you comment out all your JS and remove the overflow-x: hidden from your roller, that things are not set up the way you might think in the first place. So you might want to tweek your setup so it displays as wanted first before hooking it up to ScrollTrigger.

 

 

 

 

I thought that might be the case, but then it weirded me out that it actually almost does the right thing. I know that .roller__inner isnt taking the width of child elements, but of my viewport width, but why does it even scroll then?

I will look into it and update here