ScrollTrigger adding unintended scroll bar when fading in

[Matt Wheeler]

Here's a video showing what's happening.

https://www.loom.com/share/8759446fd7bb43dfad5df759a67dd093

 

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

document.addEventListener( 'DOMContentLoaded', function () {


    gsap.utils.toArray('.fade-in').forEach(elem => {
        gsap.fromTo(elem, {
            autoAlpha: 0, 
            y: 50
          }, {
          scrollTrigger: {
            trigger: elem,
            start: "top 80%",
            end: "bottom 10%",
            markers: true
          },
          duration: 1, 
          autoAlpha: 1, 
          y: 0
        });
      });

});

I have looked at the body/html elements and can't see anything that is causing the second scrollbar to appear. This issue only started occurring when I have added the GSAP ScrollTrigger plugin.

[Matt Wheeler]

Update: Adding overflow: hidden; to the body solves this?

[GreenSock]

It's difficult to troubleshoot without a minimal demo, but it looks like you're using a 3rd party smooth scrolling library - is that correct? It may be related to that (sorry, we don't support other libraries in this forum). And do you still see the extra scrollbar if you set markers: false? It may be as simple as a 1px line from a marker.

 

It's very common to set overflow to hidden for whichever direction you don't want a scrollbar showing.