ScrollTrigger - extra space by scrollbar

[dan111]

Hello, I was trying to recreate the GSAP demo of layered pinning: 

See the Pen QWNpMao by snorkltv (@snorkltv) on CodePen.

In my version each section is a little too narrow for the screen, so the layer below shows through until it reaches the top trigger point, then it takes up the whole width but the same problem happens with the next section coming up.

I can't work out why this is happening - I've tried it with Edge and it works fine with no gap, so it's only an issue in Chrome  (I've only tried Edge and Chrome, and only in codepen).

 

Thanks.

 

See the Pen gOJxzmb by Daniel-Imray (@Daniel-Imray) on CodePen.

[GreenSock]

That looks like a CSS issue. You've got overflow-x: hidden applied to EVERY element instead of just the body. 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

But this seems to resolve it: 

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {  
  overflow-x: hidden;
}

See the Pen XWwaOPW by GreenSock (@GreenSock) on CodePen.

[dan111]

Thank you!