本文介绍一种无需复杂库即可实现图片随滚动渐显的轻量级方法，基于原生 JavaScript 的 wheel 事件监听与 CSS 动态控制，兼容桌面与移动设备，兼顾性能与可维护性。
本文介绍一种无需复杂库即可实现图片随滚动渐显的轻量级方法，基于原生 javascript 的 `wheel` 事件监听与 css 动态控制，兼容桌面与移动设备，兼顾性能与可维护性。
要实现类似 publicofficial.co 中图片随滚动自然浮现的效果（即“滚动触发动画”），核心并非依赖 scroll 事件——因为该网站实际采用的是更灵敏、更可控的 wheel（鼠标滚轮/触摸板滑动）事件，而非传统页面滚动监听。这种方式不仅响应更快，还能在无滚动条（如全屏视口、移动端手势滑动）场景下正常工作，非常适合现代响应式设计。
✅ 基础实现：监听 wheel 事件并驱动动画
首先，在文档主体上绑定 wheel 事件监听器：
document.body.addEventListener("wheel", onMouseWheelRolled, { passive: true });
{ passive: true } 是关键优化项：它告知浏览器该事件处理器不会调用 e.preventDefault()，从而允许浏览器对滚动行为进行底层优化（尤其在移动端提升触控流畅度）。若后续需阻止默认行为（如自定义滚动逻辑），则需移除此选项并显式调用 e.preventDefault()。
接着定义处理函数，提取滚动方向与幅度，并据此更新目标元素样式：
function onMouseWheelRolled(e) {
// 获取垂直滚动偏移量（正值 = 向下滚动，负值 = 向上滚动）
const scrollDelta = e.deltaY;
// 示例：选取所有带 data-animate="image" 的图片元素
const animatedImages = document.querySelectorAll('[data-animate="image"]');
animatedImages.forEach((img, index) => {
// 基于滚动量和元素顺序，计算偏移或透明度
const offset = scrollDelta * 0.3 + index * 20; // 可调参数：视差强度 & 元素间距
const opacity = Math.min(1, Math.max(0.1, 1 - Math.abs(scrollDelta) / 300));
img.style.transform = `translateY(${offset}px)`;
img.style.opacity = opacity;
});
}
? 提示：上述代码仅为示意逻辑。真实项目中建议将动画逻辑解耦为独立函数，并结合 requestAnimationFrame 避免高频样式重绘（见下文优化部分）。
? 移动端适配说明
wheel 事件在现代 iOS Safari 和 Android Chrome 中均受支持（iOS 13.4+，Android 7+），且能捕获触控板/手指滑动产生的等效滚动信号。但需注意：
- 移动端 deltaY 数值通常比桌面端小，建议使用 e.deltaY * 2 或动态缩放因子补偿；
- 避免在 wheel 处理器中执行耗时操作（如 DOM 查询、复杂计算），否则易导致卡顿；
- 如需精确控制“进入视口”时机（而非连续滚动响应），推荐改用 IntersectionObserver（更适合“淡入”类效果）；而 wheel 更适合“视差位移”“动态缩放”等连续交互效果。
⚙️ 进阶优化建议
-
节流与 RAF 封装
直接在 wheel 回调中修改样式可能导致布局抖动。推荐封装为：let pending = false; function onMouseWheelRolled(e) { if (!pending) { pending = true; requestAnimationFrame(() => { updateAnimatedElements(e.deltaY); pending = false; }); } } -
CSS 硬件加速
对动画元素启用 GPU 加速，提升渲染性能：[data-animate="image"] { will-change: transform, opacity; transition: opacity 0.3s ease, transform 0.3s ease; } 降级与可访问性
为不支持 wheel 的旧环境提供静态 fallback；同时确保动画不影响屏幕阅读器语义（避免 aria-hidden 误用）。
综上，该方案以极简代码达成高表现力的滚动交互效果，无需引入第三方库（如 AOS、ScrollMagic），便于定制与调试，是构建轻量级视差/渐显效果的理想起点。
