用途:Locomotive Scroll 是一个 JavaScript 平滑滚动库,用于构建带视差、滚动驱动动画的沉浸式页面,如落地页、叙事型网站和长内容页面。
主要能力:硬件加速的平滑滚动与可调缓动;元素级视差速度控制;视口进入/离开检测;滚动进度事件用于同步动画;粘性元素固定;横向滚动布局。
使用方式:通过 npm install locomotive-scroll 安装,或经 CDN 引入 CSS 与 JS。HTML 需包含 data-scroll-container 容器,可选 data-scroll-section 分段,元素用 data-scroll 启用检测,data-scroll-speed 控制视差,data-scroll-sticky 实现粘性,data-scroll-call 触发自定义事件。初始化时传入 el、smooth、lerp、multiplier、class、repeat、offset 等选项。可用 scroll.on('scroll') 与 scroll.on('call') 监听,scroll.scrollTo 编程滚动,scroll.update 刷新位置,scroll.destroy 清理。支持与 GSAP ScrollTrigger 通过 scrollerProxy 同步。
适用场景:视差落地页、Apple 风格平滑滚动、滚动触发动画、叙事网站、长文内容动效。
限制:滚动劫持可能影响无障碍,需提供禁用选项;低端设备有性能开销,应检测并关闭;移动端触摸滚动体验不同,需充分测试;position: fixed 需变通处理;动态内容后需调用 update;SPA 中需 destroy 避免内存泄漏。资料未提供具体收费与价格信息。