跳过主要内容

ScrollSmoother.create

ScrollSmoother.create( ) ;

细节​

创建（并返回）一个新的 ScrollSmoother 实例。当然，在任何时候只能存在一个实例，因为它控制着整个页面的滚动。如果已经存在一个 ScrollSmoother 实例，则在创建新的实例之前会先调用其kill()方法。如果你想获取已经创建的 ScrollSmoother 的引用，请使用以下ScrollSmoother.create()调用。如果你想获取已经创建的 ScrollSmoother 的引用，请使用ScrollSmoother.get()方法快速转换任何坐标。

安装配置​

你的 HTML 内容应存在于一个单独的content元素中（通常是<div>，但具体不重要）— 当用户滚动时就是这个元素在移动。这个content元素会被包裹在一个wrapper元素中作为视口。实际的滚动条仍然保留在<body>上，所以你的结构应该如下所示：

<body>
  <div id="smooth-wrapper">
    <div id="smooth-content">
      <!--- ALL YOUR CONTENT HERE --->
    </div>
  </div>
</body>

内部机制方面，一切内容都通过ScrollTrigger流动，它监听页面原生滚动位置，然后 ScrollSmoother 对content应用变换以逐渐追上那个滚动位置。因此如果你突然拖动原生滚动条 500px，ScrollSmoother 会使用内联 CSS 变换 (matrix3d()) 在content上逐步将内容移动到对应的位置。由于 ScrollSmoother 构建在 ScrollTrigger 之上，请不要忘记注册两者：

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

用法和特殊属性​

配置对象可以包含以下任一可选属性：

速度（视差）​

当你设置effects: true时，ScrollSmoother 会找到所有具有data-speed属性的元素，并根据指定的速度应用视差效果。例如：

<div data-speed="0.5"></div> <!-- half-speed of scroll -->
<div data-speed="2"></div> <!-- double-speed of scroll -->
<div data-speed="1"></div> <!-- normal speed of scroll -->
<div data-speed="auto"></div> <!-- auto-calculated based on how far it can move inside its container -->

"auto" 速度​

当你将速度设置为"auto"时，它会计算其父容器中在最大间隙方向（向上或向下）可移动的距离。因此它非常适合视差效果——只需让子元素比父元素更大，将其对齐到你想要的位置（通常是顶部边缘与容器顶部对齐，或底部边缘与容器底部对齐），然后让 ScrollSmoother 发挥魔法。当然，在父元素上设置overflow: hidden以便裁剪子元素。

clamp() 速度效果​

你是否曾经原生地将某个元素放置在页面顶部附近，但当你应用data-speed时，它开始偏离其原生位置？这是因为默认情况下，速度效果会让元素在视口垂直居中时达到其“原生”位置，所以它们一开始可能有偏移。从版本 3.12 开始，你可以将你的速度值包裹在"clamp()"中，使其在“折叠上方”（即滚动到顶部时位于视口内的部分）的元素保持原生位置。实际上，data-speed效果是由 ScrollTrigger 实例驱动的，因此这是一种利用 ScrollTrigger 的 clamp() 功能的方式，防止起始/结束值“泄露”出页面边界范围（不能小于 0，也不能大于最大滚动位置）。例如：

<div data-speed="clamp(0.5)"></div> <!-- clamped half-speed -->
操作指南

你也可以使用effects()方法动态地为目标应用速度或延迟效果（包括基于函数的效果）。注意：effects不应该嵌套.

let scroller = ScrollSmoother.create({...});
scroller.effects(".box", {speed: 0.5, lag: 0.1});

请注意，这些元素将在视口的中心处到达其“自然”位置。下面是来自@snorkltv:

加载中...

延迟（令人愉快的那种）​

把“延迟”想象成让元素变得懒惰一些，让它从正常的滚动位置漂移出去并需要一定时间才能“赶上来”。你可以为邻近的元素分配略微不同的延迟以实现在滚动时非常悦目的错开效果。如果你在 ScrollSmoother.create() 配置中设置了effects: true，它将会自动查找任何具有data-lag属性的元素并应用该效果：

<div data-lag="0.5"></div> <!-- takes 0.5 seconds to "catch up" -->
<div data-lag="0.8"></div> <!-- takes 0.8 seconds to "catch up" -->

你也可以使用effects()方法通过 JavaScript 动态地为目标应用速度或延迟效果（包括基于函数的效果）。

let scroller = ScrollSmoother.create({...});
scroller.effects(".box", {lag: 0.5, speed: 1});

目录