scrolltrigger 初始化失败主因是未注册插件或dom未就绪；需按序加载gsap主库与scrolltrigger插件，调用registerplugin，并在domcontentloaded中执行动画代码。
ScrollTrigger 初始化失败，页面滚动没反应？
多数情况是 ScrollTrigger 没正确注册或 DOM 未就绪。GSAP 3.12+ 要求显式注册插件，且必须在 gsap 主库之后加载。常见错误是直接写 ScrollTrigger.create() 却没引入插件文件，或脚本在 前执行。
- 确保按顺序加载：
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>→<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> - 注册插件（仅需一次）：
gsap.registerPlugin(ScrollTrigger) - 动画代码必须放在
DOMContentLoaded或$(document).ready()内，否则document.querySelector()可能返回null
元素进视口后动画只播一次，想重复触发怎么办？
默认 ScrollTrigger 的 toggleActions 是 "play none none none"，即只在进入时播放，离开不重置。要实现“进播放、出重置、再进再播”，得手动配四个动作，并配合 restart 或 reset。
- 基础可复用写法：
toggleActions: "play pause resume reset"（注意第3个是resume不是restart） - 若用
gsap.to()创建动画，记得加clearProps: "all"防样式残留；否则第二次进视口时可能因内联样式阻塞动画 - 更稳妥的做法是用
scrub: true+start: "top 80%"实现跟随滚动的平滑过渡，避免触发时机抖动
动画错位、触发位置不准，和 CSS 布局强相关？
ScrollTrigger 的 start/end 值（如 "top center"）是相对于视口和目标元素的边界计算的，但若目标元素有 transform、position: absolute 或父容器 overflow: hidden，坐标会偏移。
- 优先给触发元素加
data-scroll-trigger类或属性，用document.querySelectorAll("[data-scroll-trigger]")统一处理，避免选择器误选隐藏/动态插入元素 - 检查是否意外设置了
ScrollTrigger.config({ sync: true })—— 这会让所有触发器强制同步刷新，反而导致卡顿和定位漂移 - 移动端要注意：iOS Safari 对
position: fixed容器内的滚动监听不敏感，建议把ScrollTrigger.scroller显式设为document.scrollingElement || document.documentElement
性能差、滚动卡顿，尤其是长页面？
ScrollTrigger 默认每帧都做位置检测，如果绑定了几十个元素又没节流，CPU 占用会飙升。这不是动画本身慢，而是触发逻辑太勤。
- 批量初始化时用
ScrollTrigger.batch()替代单个create()，它自动合并检测、减少重排重绘 - 禁用非必要功能：
refreshPriority: -1（降低刷新优先级）、fastScrollEnd: true（快速滚动后延迟校准） - 避免在
onEnter回调里调用gsap.set()修改布局属性（如width、height），改用transform和opacity
ScrollTrigger 实例——单页应用路由切换时，忘了调用 ScrollTrigger.killAll()，旧监听器还在后台跑，新动画就会打架。这个点容易被忽略，但真出问题时很难排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
