如何使用带有 scrollTop 的 gsap Draggable 过度滚动？

Question

import {gsap} from "gsap";
import Draggable from "gsap/Draggable";
import { InertiaPlugin } from "./libs/gsap/InertiaPlugin";
import { ScrollToPlugin } from "./libs/gsap/ScrollToPlugin";

gsap.registerPlugin(Draggable)
gsap.registerPlugin(InertiaPlugin);
gsap.registerPlugin(ScrollToPlugin);

Draggable.create(scrollContainer, {
    type: 'scrollTop',
    inertia: true,
});

这个简单的示例非常适合为桌面浏览器制作垂直 scroll/throw 效果。

轻弹回到顶部时，惯性插件使内容过度滚动并弹回起点。这个不错。

但是，过度滚动确实不会仅在拖动时发生，即。就像在 iPad 上一样。是否可以在拖动时使 Draggable overshoot/overscroll 并在拖动结束时弹回？

编辑：这是带有示例的codepen：

https://codepen.io/Agint/pen/LYZMyYR

（我找不到最新的gsap InertiaPlugin的cdn版本，所以这个版本是旧版本。无论版本如何，行为和问题都完全相同。在本地，我有最新的gsap版本和奖励文件包括来自 greensock 的 InertiaPlugin。）

Answer 1

这正是 edgeResistance 的用途：

Draggable.create("#scrollContainer", {
  type: "scrollTop",
  inertia: true,
  edgeResistance: 0.9
});

如何使用带有 scrollTop 的 gsap Draggable 过度滚动？

How to overscroll using gsap Draggable with scrollTop?

javascript

draggable

overscroll

gsap

Demo