基于JavaScript实现自定义平滑粘性滚动效果：打造类Weltio体验-html教程-PHP中文网

基于JavaScript实现自定义平滑粘性滚动效果：打造类Weltio体验

本教程详细阐述如何通过javascript实现高度定制化的平滑粘性滚动效果，以克服纯css在实现复杂交互时的局限性。核心在于禁用浏览器原生滚动，转而通过监听用户滚动输入，并结合`requestanimationframe`和`transform: translatey()`进行平滑的内容位移，从而模拟出类似weltio网站的流畅、吸附式滚动体验，同时涵盖滚动边界、弹性效果及性能优化等进阶技巧。

在现代网页设计中，为了实现独特的视觉效果和用户体验，设计师们常常追求超越浏览器原生滚动行为的交互模式，例如全屏粘性（sticky）内容切换、平滑的视差滚动或精确控制的横向滑块。尽管CSS提供了position: sticky和scroll-snap等属性，但在需要极高流畅度、自定义动画曲线或复杂联动效果时，这些纯CSS方案往往力有不逮，难以达到如Weltio网站那样精细且自然的平滑粘性滚动效果。

其根本原因在于，纯CSS的滚动行为受限于浏览器引擎的默认实现，难以精确干预滚动过程中的每一个帧，也无法在滚动停止时提供自定义的“惯性”或“吸附”动画。为了实现这种高级的自定义滚动体验，我们需要借助JavaScript来完全接管滚动控制。

核心原理：告别原生滚动，拥抱JavaScript控制

实现类Weltio的平滑粘性滚动效果，其核心思想是：

禁用原生滚动： 阻止浏览器默认的滚动行为，让页面内容“静止”在原地。
监听用户输入： 捕获用户滚动鼠标滚轮或触摸屏滑动的事件。
模拟滚动位置： 根据用户输入计算一个“期望”的滚动位置。
平滑过渡： 使用JavaScript动画循环（如requestAnimationFrame）将当前实际内容位置平滑地过渡到期望位置。
应用变换： 通过CSS transform属性（通常是translateY或translateX）来移动页面内容，而非改变原生scrollTop。

这种方法将滚动动画的控制权从浏览器手中夺回，交由开发者完全掌控，从而实现高度定制化的动画效果。

立即学习“Java免费学习笔记（深入）”；

实现步骤

1. 禁用原生滚动

首先，我们需要在CSS中禁用body元素的原生滚动条，防止其干扰我们的自定义滚动逻辑。

html, body {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden; /* 禁用原生滚动 */
  min-height: 100vh; /* 确保body有足够高度来容纳内容，即使不滚动 */
  /* 建议使用 transform: translate3d 来开启GPU加速，提升性能 */
  will-change: transform; 
}

/* 其他内容样式 */
.element {
  height: 300px;
  background-color: #112233;
  margin: 20px;
  border-radius: 20px;
}

登录后复制

2. 捕获用户滚动输入

接下来，我们监听wheel事件来获取用户的滚动意图。event.deltaY属性提供了垂直滚动的量。

let desiredScroll = 0; // 用户期望的滚动位置
let actualScroll = 0;  // 实际内容当前所处的滚动位置

// 监听滚轮事件
window.addEventListener("wheel", event => {
  desiredScroll += event.deltaY;
  // 注意：对于触摸设备，需要单独处理 'touchstart', 'touchmove', 'touchend' 事件
});

登录后复制

3. 平滑滚动动画循环

为了实现平滑过渡，我们不能直接将actualScroll设置为desiredScroll。相反，我们使用一个插值算法，在每一帧中让actualScroll逐渐逼近desiredScroll。requestAnimationFrame是实现浏览器流畅动画的最佳API。

function updateScroll() {
  const delay = 10; // 控制平滑度，值越大越平滑，响应越慢
  actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;

  // 当实际滚动位置与期望位置非常接近时，直接设为期望位置，避免无限小数计算
  if (Math.abs(actualScroll - desiredScroll) < 0.5) { 
    actualScroll = desiredScroll;
  }

  updateTransform(); // 更新内容位置

  window.requestAnimationFrame(updateScroll); // 继续下一帧动画
}

// 启动动画循环
window.requestAnimationFrame(updateScroll);

登录后复制

4. 应用内容变换

最后，我们将actualScroll的值应用于内容容器的transform: translateY()属性。为了性能考虑，建议将整个页面的内容包裹在一个父级div中，然后对这个父级div应用transform，而不是对每个独立元素。或者直接对body应用transform。

function updateTransform() {
  // 对body元素应用负向 translateY，因为滚动是内容向上移动
  document.body.style.transform = `translateY(${-actualScroll}px)`;
  // 或者对一个包裹所有内容的 div 应用 transform
  // document.getElementById('content-wrapper').style.transform = `translateY(${-actualScroll}px)`;
}

登录后复制

基础平滑滚动示例

结合上述步骤，一个基础的平滑滚动系统如下：

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

查看详情

HTML 结构:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义平滑滚动</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="element">内容块 1</div>
  <div class="element">内容块 2</div>
  <div class="element">内容块 3</div>
  <div class="element">内容块 4</div>
  <script src="script.js"></script>
</body>
</html>

登录后复制

CSS (style.css):

html, body {
  margin: 0;
  padding: 0;
  background-color: #334499; /* 示例背景色 */
}

body {
  overflow: hidden; /* 禁用原生滚动 */
  min-height: 100vh; /* 确保body有足够高度 */
  /* 使用 translate3d 开启GPU加速，提升动画性能 */
  transform: translate3d(0, 0, 0); 
  will-change: transform;
}

.element {
  height: 300px;
  background-color: #112233;
  margin: 20px;
  border-radius: 20px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

登录后复制

JavaScript (script.js):

let desiredScroll = 0;
let actualScroll = 0;

function updateScroll() {
  const delay = 10;
  actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;

  if (Math.abs(actualScroll - desiredScroll) < 0.5) {
    actualScroll = desiredScroll;
  }

  updateTransform();

  window.requestAnimationFrame(updateScroll);
}

function updateTransform() {
  document.body.style.transform = `translateY(${-actualScroll}px)`;
}

window.addEventListener("wheel", event => {
  desiredScroll += event.deltaY;
});

window.requestAnimationFrame(updateScroll);

登录后复制

增强功能：滚动边界与弹性效果

为了提供更完善的用户体验，我们需要限制desiredScroll的范围，防止用户滚动到内容之外。同时，可以添加类似iPhone的“橡皮筋”弹性效果，让用户在滚动超出边界时感受到轻微的阻力，然后内容再平滑地弹回。

let desiredScroll = 0;
let actualScroll = 0;

function updateScroll() {
  const delay = 10;
  // 计算最大滚动高度：body的实际高度 - 视口高度
  const maxScrollHeight = document.body.clientHeight - window.innerHeight;

  // 处理超出顶部边界的弹性效果
  if (desiredScroll < 0) {
    desiredScroll -= desiredScroll / (delay / 2); // 减缓滚动速度
  } 
  // 处理超出底部边界的弹性效果
  else if (desiredScroll > maxScrollHeight) {
    desiredScroll -= (desiredScroll - maxScrollHeight) / (delay / 2); // 减缓滚动速度
  }

  actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;

  // 当实际滚动位置与期望位置非常接近时，直接设为期望位置，避免抖动
  if (Math.abs(actualScroll - desiredScroll) < 1 && 
      ((desiredScroll >= 0 && desiredScroll <= maxScrollHeight) || 
       (desiredScroll < 0 && actualScroll < 0) || 
       (desiredScroll > maxScrollHeight && actualScroll > maxScrollHeight))) {
    actualScroll = desiredScroll;
  }

  updateTransform();
  window.requestAnimationFrame(updateScroll);
}

function updateTransform() {
  document.body.style.transform = `translateY(${-actualScroll}px)`;
}

window.addEventListener("wheel", event => {
  const scroll = event.deltaY;
  const maxScrollHeight = document.body.clientHeight - window.innerHeight;

  // 在边界外时，减缓滚动速度，实现弹性效果
  if (desiredScroll < 0 && scroll < 0) {
    desiredScroll += scroll / 2;
  } else if (desiredScroll > maxScrollHeight && scroll > 0) {
    desiredScroll += scroll / 2;
  } else {
    desiredScroll += scroll;
  }
});

window.requestAnimationFrame(updateScroll);

登录后复制

进阶考量：吸附与横向滚动

吸附点 (Snapping Points)

要实现内容吸附到特定点（例如全屏内容块），可以在wheel事件监听器中修改desiredScroll的计算逻辑。不再是简单地累加deltaY，而是根据滚动的方向和量，计算出下一个最近的吸附点作为desiredScroll。

例如，如果每个内容块都是100vh高，你可以：

检测deltaY的方向。
根据方向，将desiredScroll设置为当前可见内容块的顶部或底部（例如，Math.round(actualScroll / window.innerHeight) * window.innerHeight）。
可以添加一个冷却时间（cooldown），在动画完成前阻止新的滚动事件，以确保每次滚动只切换一个内容块。

横向滚动

对于横向滑块，只需将transform: translateY()改为transform: translateX()，并将desiredScroll和actualScroll应用于水平方向即可。如果需要同时支持垂直和横向滚动，则需要维护两个独立的滚动状态（desiredScrollX, actualScrollX, desiredScrollY, actualScrollY），并分别应用translateX和translateY。

注意事项与总结

性能优化：
- 始终使用transform: translate3d(x, y, z)来代替translateY()，它能强制浏览器将元素渲染到GPU层，从而获得更好的动画性能。
- 避免在动画循环中进行复杂的DOM操作或布局计算。
- will-change: transform可以提前告知浏览器该元素将发生transform变化，使其进行优化。
兼容性：
- 触摸设备： wheel事件不适用于触摸屏。你需要监听touchstart、touchmove、touchend事件来模拟滚动行为，并处理多点触控、滑动方向和速度。
- 不同浏览器： 尽管requestAnimationFrame和wheel事件在现代浏览器中支持良好，但仍需进行充分测试。
用户体验：
- 滚动灵敏度： delay参数需要仔细调整，以平衡平滑度和响应速度。
- 辅助功能： 禁用原生滚动可能会影响屏幕阅读器等辅助工具。确保提供键盘导航或其他替代方案。
- 动画曲线： 可以通过更复杂的插值函数（如缓动函数ease-in-out）来进一步优化滚动动画的自然感。
内容管理： 这种自定义滚动方案意味着你需要手动管理内容的可见性和激活状态，例如当某个内容块进入视口时触发特定动画或加载数据。