ScrollTrigger.scrollerProxy

ScrollTrigger.scrollerProxy( scroller:String | Element, vars:Object )

允许您劫持scrollTop和/或scrollLeft特定滚动元素的 getter/setter，以便您可以实现平滑滚动或其他自定义效果。

参数

scroller: 字符串 | 元素
选择器文本或需要被代理的滚动元素，例如："body"或者".container"
vars: 对象
包含 scrollTop 和/或 scrollLeft 函数的对象，这些函数作为代理的 getter/setter 使用，例如：{scrollTop: function(value) {...}, scrollLeft: function(value) {...}}。它还可以包含 getBoundingClientRect()、scrollWidth()、scrollHeight() 的方法，以及一个可选的 pinType："fixed" | "transform"

细节

允许您劫持scrollTop和/或scrollLeft特定滚动元素的 getter/setter，以便您可以实现平滑滚动或其他自定义效果。

GSAP 自带的ScrollSmoother是一个基于 ScrollTrigger 构建的平滑滚动插件，在此基础上所以它是完全集成且非常易于使用。它使用原生滚动技术来避免其他平滑滚动库常见的大部分可访问性问题。如果您想使用第三方库，可能需要使用 scrollerProxy()。我们不支持其他库，但为方便起见，下面提供了一些使用流行库的演示示例。

它是如何工作的？

通常 ScrollTrigger 直接通过该滚动元素上的常规属性/方法获取/设置滚动位置，但您也可以提供自己的 getter/setter 函数以实现自定义体验，例如：

// 3rd party library setup:
const bodyScrollBar = Scrollbar.init(document.body, {
  damping: 0.1,
  delegateTo: document,
});

// Tell ScrollTrigger to use these proxy getter/setter methods for the "body" element:
ScrollTrigger.scrollerProxy(document.body, {
  scrollTop(value) {
    if (arguments.length) {
      bodyScrollBar.scrollTop = value; // setter
    }
    return bodyScrollBar.scrollTop; // getter
  },
  getBoundingClientRect() {
    return {
      top: 0,
      left: 0,
      width: window.innerWidth,
      height: window.innerHeight,
    };
  },
});

// when the smooth scroller updates, tell ScrollTrigger to update() too:
bodyScrollBar.addListener(ScrollTrigger.update);

基本上，你是在说“嘿 ScrollTrigger，每当你想要获取或设置此元素上的 scrollTop 或 getBoundingClientRect() 时，请改用这些方法”然后你在这些方法内部执行任何你想执行的操作。

操作演示

特殊属性

你必须提供scrollTop或者scrollLeftgetter/setter（可以只提供其中一个）；其余属性可能是有用的（但不是必须的）：

属性	描述
scrollTop	函数 - 可同时用作 getter 和 setter 的方法；如果收到参数，则应将其视为 setter；否则应将其视为 getter，并返回当前的 scrollTop 值。
scrollLeft	函数 - 可同时用作 getter 和 setter 的方法；如果收到参数，则应将其视为 setter；否则应将其视为 getter，并返回当前的 scrollLeft 值。
fixedMarkers	布尔值 - 如果`true`，将标记视为 position: fixed。只有当你要集成的平滑滚动库会导致标记放置在一个被变换（translate）的元素内时才会有用。如果你注意到你的标记在你不希望它们移动的时候发生了位移，请尝试将此值设为`true`. （3.7.0版本中添加）
getBoundingClientRect	函数 - 返回一个包含`top`, `left`, `width`，以及`height`表明代理滚动器边界矩形的属性对象。最常见的是`{top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}`.
scrollWidth	函数 - 可同时用作 getter 和 setter 的方法；如果收到参数，则应将其视为 setter；否则应将其视为 getter，并返回当前的 scrollWidth 值。
scrollHeight	函数 - 可同时用作 getter 和 setter 的方法；如果收到参数，则应将其视为 setter；否则应将其视为 getter，并返回当前的 scrollHeight 值。
pinType	"fixed" \| "transform" - 决定与此代理滚动器关联的元素被固定（pin）时的方式（如果 ScrollTrigger 已定义了`pin`）。默认情况下，仅当`<body>`使用`position: "fixed"`进行固定，在所有其他情况下使用 transform 偏移。为什么？因为如果某个祖先元素应用了 transform（甚至只是`transform: translate(0, 0)`），都会创建一个新的上下文，`position: "fixed"`导致其表现不符合预期。这是浏览器的行为，而不是 ScrollTrigger 的行为。`pinType`允许你强制 ScrollTrigger 对代理滚动器使用特定的固定技术。如果你发现固定的元素抖动，请尝试设置`pinType: "fixed"`（抖动通常是因为浏览器将主页面的滚动处理放在不同的线程中，因此通过 JS 应用的 transform 并不同步造成的）。如果固定效果看起来完全没有生效，请尝试设置`pinType: "transform"`.

GreenSock 并不推荐或背书任何特定的平滑滚动库——以下演示是根据各种论坛帖子整理的。

通知

消息

ScrollTrigger.scrollerProxy