本文介绍一种轻量、高性能的纯 javascript 方案，通过监听滚动事件与元素可视区域位置关系，动态计算滚动进度并驱动文本容器从左右两侧平滑飞入/飞出视口，支持任意宽度内容与响应式布局。
本文介绍一种轻量、高性能的纯 javascript 方案，通过监听滚动事件与元素可视区域位置关系，动态计算滚动进度并驱动文本容器从左右两侧平滑飞入/飞出视口，支持任意宽度内容与响应式布局。
在现代网页动效实践中，「滚动触发动画」（Scroll-triggered Animation）是提升用户沉浸感的关键技术之一。不同于依赖第三方库（如 AOS 或 GSAP）的方案，本文提供一个零依赖、语义清晰、可精准控制起止逻辑的原生实现，专为长文本横向滚动动画优化。
核心原理：滚动进度映射为 CSS 位移值
动画效果的本质是将用户当前滚动位置（window.scrollY）映射为 0% → 100% 的归一化进度值，并据此驱动 left 或 right 的 vw 偏移量。关键在于：
- ✅ 正确锚定参考区间：以 .wrapper 元素的 offsetTop 与 offsetHeight 界定动画生效的垂直范围；
- ✅ 动态计算视口内进度：scrollProgress = 100 - (100 / visibleHeight × (item.offsetTop - window.scrollY))，确保元素完全进入/离开时进度值严格落在 [0, 100]；
- ✅ 自适应宽度缩放因子：faktor = 100 / window.innerWidth × ((window.innerWidth + item.offsetWidth) / 100)，解决宽元素在窄屏下位移失真问题；
- ✅ 方向解耦控制：通过 data-position="left" 或 "right" 分别控制起始侧边与位移符号逻辑。
完整可运行示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 1500px 0;
background: #222;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
.wrapper {
background: orange;
overflow: hidden;
padding: 200px 0;
position: relative;
}
.item {
background: #4CAF50;
height: 100px;
position: relative;
margin: 20px 0;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
}
.item[data-position="left"] { left: -100vw; }
.item[data-position="right"] { right: -100vw; }
</style>
</head>
<body>
<div class="wrapper">
<div class="item" data-position="left">← 左侧飞入</div>
<div class="item" data-position="right">右侧飞入 →</div>
<div class="item" data-position="left">← 再来一个</div>
<div class="item" data-position="left">← 宽度自适应</div>
<div class="item" data-position="right">自动适配屏幕 →</div>
<div class="item" data-position="right">→ 最后一个</div>
</div>
<script>
const run = () => {
const wrappers = document.querySelectorAll('.wrapper');
if (!wrappers.length) return;
const updateAnimations = () => {
wrappers.forEach(wrapper => {
const items = wrapper.querySelectorAll('.item');
if (!items.length) return;
const wrapperTop = wrapper.offsetTop;
const wrapperBottom = wrapperTop + wrapper.offsetHeight;
items.forEach(item => {
// 判断是否处于视口垂直影响范围内
if (wrapperBottom < window.scrollY || wrapperTop > window.scrollY + window.innerHeight) return;
const position = item.getAttribute('data-position');
if (!position) return;
// 关键计算：缩放因子 & 可视高度
const faktor = 100 / window.innerWidth * ((window.innerWidth + item.offsetWidth) / 100);
const visibleHeight = window.innerHeight - item.offsetHeight;
// 滚动进度：0=刚进入，100=即将离开
let scrollProgress = 100 - (100 / visibleHeight * (item.offsetTop - window.scrollY));
scrollProgress = Math.max(0, Math.min(100, scrollProgress));
// 起始偏移（隐藏态）
let startPos = position === 'left'
? -100 * faktor
: 100 * faktor;
// 合成最终位移（单位：vw）
const finalPos = startPos + scrollProgress * faktor;
item.style[position] = `${finalPos}vw`;
});
});
};
// 高频优化：使用 requestAnimationFrame 防抖
let ticking = false;
const throttleUpdate = () => {
if (!ticking) {
requestAnimationFrame(() => {
updateAnimations();
ticking = false;
});
ticking = true;
}
};
window.addEventListener('scroll', throttleUpdate);
window.addEventListener('resize', throttleUpdate); // 响应式重算
updateAnimations(); // 首屏立即执行
};
run();
</script>
</body>
</html>注意事项与最佳实践
- ⚠️ 避免 scroll 事件直接绑定高频操作：本例采用 requestAnimationFrame 节流，显著降低主线程压力；
- ⚠️ offsetTop 依赖文档流：确保 .wrapper 未被 transform 或 position: fixed/absolute 干扰，否则需改用 getBoundingClientRect()；
- ✅ 无障碍友好：动画不影响语义结构，且可通过 prefers-reduced-motion 媒体查询降级（建议在生产环境补充）；
- ✅ CSS 层面预设初始状态：.item[data-position="left"] { left: -100vw } 确保未触发前完全隐藏，避免闪现；
- ? 调试技巧：临时添加 console.log({ scrollProgress, finalPos }) 快速验证数值合理性。
该方案已验证兼容 Chrome/Firefox/Safari（含 iOS），不依赖 jQuery 或 IntersectionObserver（兼容性更广），适合集成至 CMS 页面或静态站点中，兼顾性能、可维护性与视觉表现力。
