如何使用带有scrollTop的gsap Dragable进行过度滚动

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,
});

这个简单的例子非常适合为桌面浏览器制作垂直滚动/投掷效果。

当轻弹滚动回到顶部时，惯性插件会使内容过度滚动并反弹到起点。这很好。

然而，当只是拖动时，即像在iPad上一样，过度滚动不会发生。是否可以在拖动时使可拖动过冲/过卷，并在拖动结束时反弹？

编辑：这是带示例的代码笔：

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

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

Answer 1

这正是edgeResistance的用途：

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

Demo