通过引入 luxy.js 库并正确初始化，可为整站内容启用原生、无交互依赖的全局平滑滚动体验，适用于现代浏览器，无需修改锚点链接或监听点击事件。
luxy.js 是一款轻量级、高性能的视差与平滑滚动 JavaScript 库，其核心优势在于自动接管页面默认滚动行为，无需绑定任何点击事件或修改 等传统导航逻辑——这正是你所要求的“始终生效、不依赖点击”的全局平滑滚动效果。
✅ 快速集成步骤（推荐现代项目）
-
安装依赖（如使用构建工具）
npm install luxy.js --save
然后在主 JS 入口文件中导入并初始化：
import luxy from 'luxy.js'; luxy.init({ wrapper: '#luxy', // 滚动作用域容器（见下文说明） wrapperSpeed: 0.05, // 滚动阻尼系数，值越小越顺滑（建议 0.03–0.07） touchSpeed: 0.05, }); -
HTML 结构：包裹全部可滚动内容
将全站主要内容（如、 、 ... ...
⚠️ 注意事项： #luxy 容器必须是 的直接子元素，且需设置 height: 100vh; overflow: hidden;（luxy 会自动创建内部滚动层）； 原生 scroll-behavior: smooth 仅支持锚点跳转，无法实现连续滚动平滑化，而 luxy.js 通过 requestAnimationFrame + transform 实现帧率稳定的物理滚动模拟； 若页面含 iframe、Canvas 或第三方组件，建议为其添加 data-luxy-ignore 属性以避免渲染异常； 移动端需启用 touchSpeed 参数，并确保 viewport meta 标签完整：。
? 替代方案对比（简要）
| 方案 | 是否全局生效 | 是否需点击触发 | 浏览器兼容性 | 备注 |
|---|---|---|---|---|
| scroll-behavior: smooth (CSS) | ❌ 仅锚点跳转 | ✅ 是 | Chrome 61+, Firefox 68+ | 原生、零 JS，但不满足“始终平滑”需求 |
| window.scrollTo({ behavior: 'smooth' }) (JS) | ❌ 需手动调用 | ✅ 是 | 广泛支持 | 适合局部控制，非自动接管 |
| luxy.js | ✅ 全局接管原生滚动 | ❌ 否 | Chrome/Firefox/Safari/Edge（≥v91） | 推荐用于追求设计感与一致动效的现代站点 |
完成配置后，用户无论使用鼠标滚轮、触控板、键盘方向键或触摸屏拖拽，都将获得如 Webflow Luxy 示例 般丝滑、有弹性的滚动体验——真正实现「开箱即用」的全局平滑滚动。
