本文介绍如何使用原生 javascript 和 css 实现“滚动触发动画”（如淡入效果），解决常见 dom 选择错误、库依赖混淆及性能隐患，提供可直接运行的轻量级实现方案。
本文介绍如何使用原生 javascript 和 css 实现“滚动触发动画”（如淡入效果），解决常见 dom 选择错误、库依赖混淆及性能隐患，提供可直接运行的轻量级实现方案。
实现滚动触发动画的核心逻辑是：监听用户滚动行为 → 判断目标元素是否进入视口 → 动态添加动画类。相比依赖 jQuery 的旧方案，现代开发推荐使用
原生 JavaScript + Intersection Observer API
，它性能更优、兼容性良好（支持 Chrome 76+/Firefox 76+/Edge 79+），且无需手动计算滚动位置与元素偏移。
✅ 正确实现步骤（无第三方库）
1. HTML 结构（语义清晰，无需 ID 冗余）
2. CSS 动画定义（分离样式与行为）
⚠️ 注意：transition 必须写在基础类（.anim-target）中，而非 .is-visible 中，否则首次添加类时无过渡效果。
3. JavaScript 逻辑（高效、防抖、可复用）
❌ 原代码问题深度解析
选择器错误
：document.getElementById("anim") 却给元素设 class="anim"，ID 未定义导致 obj 为 null；
jQuery 误用
：代码混用 jQuery（$(...)）但未引入 CDN，浏览器报错 ReferenceError: $ is not defined；
逻辑缺陷
：else 分支仍添加 fade 类，导致动画无法重置；且未移除类，重复滚动会失效；
性能风险
：scroll 事件高频触发，未节流/防抖易造成卡顿。
✅ 进阶建议
兼容旧浏览器
：若需支持 IE，可用 getBoundingClientRect() 手动判断视口位置（配合 throttle）；
批量控制
：为不同动画效果添加 data-animation="fade-up"、data-delay="0.2s" 等属性，动态注入 CSS 变量；
无障碍优化
：为 .is-visible 添加 aria-hidden="false"，确保屏幕阅读器同步感知内容出现。
通过 Intersection Observer，你不仅解决了触发问题，更获得了一套可扩展、高性能、零依赖的交互动画基础设施。现在，只需为任意元素添加 .anim-target 类，即可享受丝滑的滚动入场体验。
滚动触发动画
Hello, I fade in on scroll!
/* style.css */
.anim-target {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.anim-target.is-visible {
opacity: 1;
transform: translateY(0);
}// script.js
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
// 可选：触发后停止观察，节省资源
observer.unobserve(entry.target);
}
});
},
{
threshold: 0.1 // 当 10% 元素进入视口即触发
}
);
// 观察所有带 data-animate 或自定义 class 的元素
document.querySelectorAll('.anim-target').forEach(el => {
observer.observe(el);
});