0 
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 上一样。是否可以在拖动时使 Draggable overshoot/overscroll 并在拖动结束时反弹？

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

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

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

4

1 回答 1

1

这正是edgeResistance它的用途：

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

演示

于 2020-11-12T15:52:57.413 回答