在前端开发中，我们常常需要实现滚动触发某些操作的功能。ScrollTrigger 是一个非常好用的 npm 包，可以帮助我们轻松实现这个功能。
安装
使用 npm 安装 ScrollTrigger：
npm install gsap scrolltrigger
使用方法
导入 ScrollTrigger
import { gsap } from "gsap"; import { ScrollTrigger } from "scrolltrigger"; // or const gsap = require("gsap"); const ScrollTrigger = require("scrolltrigger");创建 Tween 和 Trigger
假设我们要让一个元素在页面滚动到它出现在视口中时淡入：
<div class="box"></div>
-- -------------------- ---- ------- ----- --- - ------------------------------- ----- ----- - ------------ - -------- - --- ----- ------- - --- --------------- -------- ---- ------ ---- -------- ---- ------- ----- ------ ----- ----- ----- ---
trigger指定被监听的 DOM 元素。start指定触发开始的位置，默认是top center。end指定触发结束的位置，默认是bottom center。scrub表示是否平滑滚动，默认为 false。once表示是否只触发一次，默认为 false。
将 Trigger 添加到控制器
创建一个 ScrollTrigger 控制器，将 Trigger 添加到控制器：
const controller = new ScrollTrigger.Controller(); controller.addTrigger(trigger);
事件监听
ScrollTrigger 可以监听多种事件，比如
enter、leave、start、end等等。下面是一个例子，当触发的元素完全进入视口时，打印一条信息：ScrollTrigger.addEventListener("enter", () => console.log("entered"));
示例代码
HTML：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------- ------------
-------
---- -
------- ------
-
---- -
------ ------
------- ------
----------------- ----
-------- --
--------- ---------
---- ------
----- ----
---------- -----------------
-
--------
-------
------
---- ------------------
------- ------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- --------------------------
-------
-------JavaScript:
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - ------------- - ---- ---------------- ----- --- - ------------------------------- ----- ----- - ------------ - -------- - --- ----- ------- - --- --------------- -------- ---- ------ ---- -------- ---- ------- ----- ------ ----- ----- ----- --- ----- ---------- - --- --------------------------- ------------------------------- --------------------------------------- -- -- ------------------------
总结
使用 ScrollTrigger 可以轻松地实现滚动触发效果。除了上面介绍的 API，还有很多其他的功能可以探索，比如嵌套 Trigger、时间线偏移等等。希望本文对你有所启发，可以让你更好地处理滚动触发的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34100