如何实现全站全局平滑滚动效果（无需点击触发）

方案1：纯CSS快速实现基础平滑滚动 #

如果只需要基础的平滑过渡效果，直接给根元素加CSS属性就能搞定，所有滚动行为（鼠标滚轮、触摸滑动、键盘操作）都会自动触发平滑效果：

html {
  scroll-behavior: smooth;
}

缺点是动画效果比较基础，没有惯性或自定义缓动的高级特性，适合对滚动质感要求不高的场景。

方案2：用Luxy.js实现高级惯性平滑滚动（匹配参考效果） #

你参考的示例用的就是Luxy.js，它能实现带有延迟跟随感的高级平滑滚动，全程自动生效，不需要触发元素。步骤如下：

1. 安装或引入Luxy.js：
   • 通过npm安装：npm install luxy.js --save
   • 或者直接下载源码后，在页面底部引入脚本文件
2. 调整HTML结构，把所有页面内容放到指定容器里：

<div id="luxy">
  <!-- 你的所有页面内容都放在这里 -->
</div>

3. 初始化Luxy.js：

// 如果是npm引入
import luxy from 'luxy.js';
// 如果是直接引入脚本，直接调用即可
luxy.init({
  wrapper: '#luxy', // 内容容器的选择器
  wrapperSpeed: 0.08, // 滚动速度系数，数值越小滚动越平缓
});

这个方案的效果和你参考的示例完全一致，滚动时页面会有自然的惯性跟随感，支持所有滚动操作方式。

方案3：自定义JavaScript实现（高度定制场景） #

如果不想依赖第三方库，可以自己写JS实现平滑滚动，通过监听滚动事件结合动画帧来实现缓动效果：

let isScrolling = false;

const smoothScroll = () => {
  const currentScroll = window.pageYOffset;
  const targetScroll = document.documentElement.scrollTop || document.body.scrollTop;
  const diff = targetScroll - currentScroll;
  const scrollStep = diff * 0.1; // 调整这个数值改变平滑程度，越大越快

  if (Math.abs(scrollStep) > 0.1) {
    window.scrollTo(0, currentScroll + scrollStep);
    requestAnimationFrame(smoothScroll);
  } else {
    isScrolling = false;
  }
};

window.addEventListener('scroll', () => {
  if (!isScrolling) {
    isScrolling = true;
    requestAnimationFrame(smoothScroll);
  }
});

你可以根据需求调整scrollStep的系数，实现不同的平滑质感。

内容的提问来源于stack exchange，提问作者Agent