如何使用JavaScript为页面添加自定义滚动行为（仿plastic.design效果）

这个效果属于自定义阻尼滚动，核心是通过JS接管原生滚动行为，模拟带有延迟、减速感的滚动手感，和无限滚动完全不同。下面是具体的实现方案：

核心思路 #

• 禁用容器的原生滚动，避免和自定义逻辑冲突
• 监听鼠标滚轮/触摸滑动事件，获取滚动的方向和幅度
• 用requestAnimationFrame实现平滑的滚动过渡，通过阻尼系数控制延迟感
• 处理滚动边界（顶部/底部）的限制

代码实现 #

HTML #

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 这里放你的页面内容，比如长文本、图片等 -->
    <p>大量内容示例...</p>
    <!-- 重复足够多的内容让容器可滚动 -->
  </div>
</div>

CSS #

.scroll-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 禁用原生滚动 */
  position: relative;
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

JavaScript #

const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');

let currentY = 0;
let targetY = 0;
const damping = 0.15; // 阻尼系数，值越大延迟感越强

// 监听鼠标滚轮事件
container.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止原生滚动
  targetY += e.deltaY;
  // 限制滚动范围
  const maxScroll = content.offsetHeight - container.offsetHeight;
  targetY = Math.max(0, Math.min(targetY, maxScroll));
});

// 用requestAnimationFrame实现平滑滚动
function updateScroll() {
  const diff = targetY - currentY;
  currentY += diff * damping;
  
  // 当差值足够小时，直接定位到目标，避免抖动
  if (Math.abs(diff) < 0.1) {
    currentY = targetY;
  }
  
  content.style.transform = `translateY(-${currentY}px)`;
  requestAnimationFrame(updateScroll);
}

// 启动滚动更新
updateScroll();

补充说明 #

• 阻尼系数可以根据需求调整：damping值越大，滚动延迟感越强，值越小越接近原生滚动
• 可以扩展支持触摸设备：监听touchstart、touchmove、touchend事件，计算触摸滑动的距离来更新targetY
• 性能优化：如果内容非常复杂，可使用will-change: transform给滚动内容添加硬件加速提示

内容的提问来源于stack exchange，提问作者fr-haus