当我到达终点时，机车滚动条变白

问：

我正在使用机车（平滑滚动器）和 gsap scrolltrigger 的帮助下制作一个网站，尝试更改我的标题位置和滚动视频的大小，这工作得很好，但是当我到达页面的终点时，我的滚动条变成了白色或白色。我很困惑为什么会这样。

这是我的代码，你们可以看看，告诉我我是否做错了什么。

.page1 {
  min-height: 100vh;
  width: 100vw;
}

.page1 h1 {
  font-size: 8vw;
  font-weight: 300;
  font-family: PP mori;
  margin-top: 12vw;
  margin-left: 6vw;
}

.page1 h2 {
  font-size: 8vw;
  font-weight: 300;
  font-family: PP mori;
  margin-left: 26vw;
}

.page1 video {
  width: 60%;
  margin-top: 10vw;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

这是 JavaScript 代码。

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".page1 h1",
    scroller: ".main",
    markers: true,
    start: "top 27%",
    end: "top 0",
    scrub: 3,
  },
});

tl.to(
  ".page1 h1",
  {
    x: -100,
    //   duration: 1,
  },
  "anim"
);

tl.to(
  ".page1 h2",
  {
    x: 80,
  },
  "anim"
);

tl.to(
  ".page1 video",
  {
    width: "90%",
  },
  "anim"
);

提前致谢。