构建自定义平滑粘性滚动效果：超越CSS的JavaScript实现-html教程-PHP中文网

构建自定义平滑粘性滚动效果：超越CSS的JavaScript实现

霞舞

发布： 2025-11-22 13:17:37

原创

259人浏览过

构建自定义平滑粘性滚动效果：超越CSS的JavaScript实现

本文深入探讨如何通过javascript实现类似weltio网站的平滑、粘性滚动动画，克服纯css在复杂滚动交互上的局限性。教程将指导读者禁用原生滚动、捕获用户滚轮输入，并利用`requestanimationframe`和`transform`属性构建一个自定义的平滑滚动系统，包括边界处理和“橡皮筋”效果，最终实现高度定制化的用户体验。

在现代网页设计中，为了提供独特且沉浸式的用户体验，开发者常常需要实现超越浏览器原生滚动行为的复杂动画效果，例如全屏粘性水平滚动滑块或平滑过渡的内容切换。尽管CSS提供了scroll-snap等属性来辅助实现一些滚动效果，但对于需要精细控制滚动速度、缓动曲线以及在滚动过程中保持元素“粘性”并触发内容变化的场景，纯CSS往往力不从心。本文将介绍一种通过JavaScript完全接管滚动控制的方法，以实现高度定制化的平滑粘性滚动效果。

1. 理解原生滚动的局限性

原生浏览器滚动通常是瞬时且线性的，其行为由操作系统和浏览器默认实现。scroll-snap可以帮助我们将滚动位置对齐到特定元素，但它难以实现自定义的缓动效果、在滚动到某个点时“暂停”页面滚动并切换内容，或者在滚动超出边界时产生“橡皮筋”般的弹性回弹。这些高级交互通常需要JavaScript来精确计算和控制元素的视觉位置。

2. 禁用原生滚动行为

要完全控制页面的滚动，首先需要禁用浏览器的原生滚动行为。这可以通过将body元素的overflow属性设置为hidden来实现。

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

body {
  overflow: hidden; /* 禁用原生滚动 */
  min-height: 100vh; /* 确保内容有足够的空间 */
  padding: 20px 0; /* 示例内容间距 */
  background-color: #334499; /* 示例背景色 */
}

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

登录后复制

在HTML结构中，我们将创建一些可滚动的“元素”作为演示内容：

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

<!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>
  <div class="element">内容块 5</div>
  <script src="script.js"></script>
</body>
</html>

登录后复制

3. 捕获用户输入并实现平滑动画

禁用原生滚动后，我们需要监听用户滚动事件（通常是鼠标滚轮事件），并根据这些输入来计算我们期望的滚动位置。然后，通过一个动画循环，使实际的滚动位置平滑地趋近于期望位置。

3.1 监听滚轮事件

使用window.addEventListener("wheel", ...)来捕获滚轮事件。event.deltaY属性提供了滚动的垂直距离。

let desiredScroll = 0; // 期望的滚动位置
let actualScroll = 0;  // 当前实际的滚动位置

// 监听滚轮事件，更新期望滚动位置
window.addEventListener("wheel", event => {
  desiredScroll += event.deltaY;
});

登录后复制

3.2 实现平滑动画循环

为了实现平滑过渡，我们不能直接将actualScroll设置为desiredScroll。相反，我们将让actualScroll逐步逼近desiredScroll。这通常通过一个插值（interpolation）公式在requestAnimationFrame循环中完成。requestAnimationFrame是浏览器提供的优化动画的API，它会在浏览器下一次重绘之前执行回调函数，确保动画与浏览器帧率同步，从而提供更流畅的体验。

Flawless AI

好莱坞2.0，电影制作领域的生成式AI工具

查看详情

const delay = 10; // 控制平滑度的延迟因子，值越大越平滑

function updateScroll() {
  // 平滑地将实际滚动位置趋近于期望滚动位置
  actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;

  // 更新元素或容器的transform属性
  updateTransform();

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

function updateTransform() {
  // 将整个body内容向上移动，实现滚动效果
  // 使用transform: translateY可以利用GPU加速，性能更优
  document.body.style.transform = `translateY(${-actualScroll}px)`;
  // 注意：translateY的负值表示内容向上滚动，即页面向下滚动
}

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

登录后复制

通过这种方式，当用户滚动滚轮时，desiredScroll会立即更新，但actualScroll会缓慢且平滑地追随，从而产生平滑的滚动效果。

4. 边界处理与“橡皮筋”效果

简单的平滑滚动系统可能会允许用户无限滚动，或者在到达内容末尾时突然停止。为了提升用户体验，我们需要添加边界检查，并可选地实现类似iPhone的“橡皮筋”回弹效果。

4.1 计算最大滚动高度

首先，我们需要知道页面内容可以滚动的最大高度。这通常是body的总高度减去视口高度。

function getMaxScrollHeight() {
  return document.body.clientHeight - window.innerHeight;
}

登录后复制

4.2 限制滚动范围与“橡皮筋”效果

在updateScroll和wheel事件监听器中加入逻辑来处理滚动边界。

let desiredScroll = 0;
let actualScroll = 0;
const delay = 10;

function updateScroll() {
  const maxScrollHeight = getMaxScrollHeight();

  // 边界处理：当期望滚动超出边界时，减缓其速度，实现“橡皮筋”效果
  if (desiredScroll < 0) {
    desiredScroll -= desiredScroll / (delay / 2); // 越界时滚动减速
  }
  if (desiredScroll > maxScrollHeight) {
    desiredScroll -= (desiredScroll - maxScrollHeight) / (delay / 2); // 越界时滚动减速
  }

  // 平滑插值
  actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;

  // 当实际滚动与期望滚动非常接近时，直接设为相等，避免微小抖动
  if (Math.abs(actualScroll - desiredScroll) < 1) {
    actualScroll = desiredScroll;
  }

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

function updateTransform() {
  // 使用translateY的负值模拟向下滚动
  document.body.style.transform = `translateY(${-actualScroll}px)`;
}

window.addEventListener("wheel", event => {
  const scrollDelta = event.deltaY;
  const maxScrollHeight = getMaxScrollHeight();

  // 根据当前滚动位置和方向，调整期望滚动值
  if (desiredScroll < 0 && scrollDelta < 0) {
    // 向上滚动超出顶部时，减缓滚动速度
    desiredScroll += scrollDelta / 2;
  } else if (desiredScroll > maxScrollHeight && scrollDelta > 0) {
    // 向下滚动超出底部时，减缓滚动速度
    desiredScroll += scrollDelta / 2;
  } else {
    // 正常滚动
    desiredScroll += scrollDelta;
  }
});

window.requestAnimationFrame(updateScroll);

// 确保在窗口大小改变时重新计算最大滚动高度
window.addEventListener('resize', () => {
  // 重新计算maxScrollHeight，并调整desiredScroll以防止内容跳动
  const currentMaxScroll = getMaxScrollHeight();
  if (desiredScroll > currentMaxScroll) {
    desiredScroll = currentMaxScroll;
  }
  if (desiredScroll < 0) {
    desiredScroll = 0;
  }
  // 立即更新transform，避免resize后的闪烁
  updateTransform();
});

登录后复制

5. 高级应用：粘性元素与内容切换

有了这个基础的平滑滚动系统，实现类似Weltio的粘性元素和内容切换就变得可行。

粘性元素： 你可以在CSS中使用position: sticky，或者在JavaScript中根据actualScroll的值动态计算元素的位置和透明度，使其在特定滚动区间内保持“粘性”或进行动画。
内容切换： 当actualScroll达到某个预设阈值时，你可以触发JavaScript函数来改变DOM内容、切换图片、播放视频或更新CSS类，从而实现内容的平滑过渡。例如，可以定义一系列“滚动点”，当actualScroll通过这些点时，触发相应的内容更新。

6. 总结与注意事项

通过JavaScript接管滚动控制，我们可以实现高度定制化的、超出CSS能力范围的平滑粘性滚动效果。

性能优化： 始终使用transform: translateY或translate3d来移动元素，因为它们能够利用GPU加速，提供更流畅的动画。避免在动画循环中修改top、left、width、height等会触发浏览器重排（reflow）和重绘（repaint）的属性。
兼容性： 鼠标滚轮事件在大多数现代浏览器中都支持。然而，对于触摸设备（如手机和平板），你需要额外监听touchstart、touchmove和touchend事件来模拟滚动行为。
无障碍性： 禁用原生滚动会影响键盘导航和屏幕阅读器。在实现自定义滚动时，务必考虑为这些用户提供替代的导航机制，例如键盘方向键支持或跳过动画的选项。
复杂性权衡： 自定义滚动系统比原生滚动更复杂，需要更多的代码和维护。在决定使用之前，请权衡其带来的用户体验提升是否值得额外的开发成本。
模块化： 将滚动逻辑封装成一个可复用的模块或组件，以便在不同的项目中使用和管理。