构建沉浸式平滑粘性滚动体验：JavaScript驱动的自定义滚动方案-html教程-PHP中文网

构建沉浸式平滑粘性滚动体验：JavaScript驱动的自定义滚动方案

本文深入探讨如何通过javascript实现高度定制化的平滑粘性滚动效果，模仿如weltio网站的沉浸式用户体验。教程将指导开发者禁用浏览器原生滚动，转而监听用户滚轮输入，并利用`requestanimationframe`和css `transform`属性，以平滑的动画逻辑控制页面内容的位移，同时涵盖滚动边界、回弹效果及性能优化等关键技术细节。

引言：超越原生滚动的需求

在现代Web设计中，为了提供更具吸引力和沉浸感的交互体验，开发者经常需要实现超越浏览器原生滚动行为的效果，例如平滑的页面过渡、粘性内容在滚动时的特定动画，或是类似Weltio网站中那种“感知不到原生滚动”的自定义滚动条。传统的CSS属性，如position: sticky和scroll-snap-type，虽然能实现部分粘性或吸附效果，但在需要极致平滑、高度可控的滚动动画时，往往力不从心。原生滚动机制通常是离散的、基于事件触发的，难以实现那种如同液体般流动的平滑过渡。

为了达到这种高阶的滚动体验，我们需要放弃对原生滚动的完全依赖，转而通过JavaScript来全面接管滚动逻辑。核心思想是：禁用浏览器自带的滚动条，监听用户的滚轮（或触摸）输入，然后通过编程方式计算内容的理想位置，并以动画的形式平滑地将内容移动到该位置。

核心原理：JavaScript驱动的滚动机制

实现自定义平滑滚动效果主要依赖以下几个核心步骤：

禁用原生滚动： 在CSS中，通过设置body { overflow: hidden; }来阻止浏览器生成和处理滚动条。
监听用户输入： 使用JavaScript监听wheel事件（对于桌面端）或触摸事件（touchstart, touchmove, touchend，对于移动端），捕获用户的滚动意图和方向。
平滑动画循环： 引入两个关键变量：desiredScroll（用户期望的滚动位置）和actualScroll（当前内容的实际滚动位置）。通过requestAnimationFrame创建一个动画循环，在每一帧中，让actualScroll逐渐逼近desiredScroll，从而产生平滑的过渡效果。
内容位移： 在动画循环中，根据actualScroll的值，动态地修改页面内容的CSS transform属性（通常是translateY或translate3d）。使用transform进行位移比修改top或margin-top具有更好的性能，因为它利用了GPU加速。

实现步骤详解

下面我们将通过具体的代码示例，逐步构建一个基本的平滑滚动系统。

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

1. 基础HTML结构

首先，我们需要一个包含多个内容区块的HTML结构。这里我们使用简单的div元素作为示例。

<html>
<head>
  <title>Custom Smooth Scroll</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>

登录后复制

2. 关键CSS样式

为了禁用原生滚动并为内容元素提供基本样式，我们需要以下CSS。

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

html {
  background-color: #334499; /* 页面背景色 */
}

body {
  overflow: hidden; /* 禁用原生滚动 */
  min-height: 100vh; /* 确保body有足够高度来容纳内容 */
}

.element {
  height: 300px; /* 每个内容区块的高度 */
  background-color: #112233;
  margin: 20px; /* 间距 */
  border-radius: 20px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

登录后复制

3. JavaScript实现平滑滚动

这是实现核心逻辑的部分。我们将定义desiredScroll和actualScroll，并创建动画循环。

// script.js

let desiredScroll = 0; // 用户期望的滚动位置
let actualScroll = 0;  // 页面内容的实际滚动位置

// 动画循环函数
function updateScroll() {
  const delay = 10; // 决定平滑程度的延迟因子，值越大越平滑但响应慢

  // actualScroll 逐渐逼近 desiredScroll
  actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;

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

  // 请求下一帧动画
  window.requestAnimationFrame(updateScroll);
}

// 应用transform到所有内容元素（或它们的共同父元素）
function updateTransform() {
  // 这里我们选择直接平移body元素，因为它包含了所有内容
  // 也可以选择一个包裹所有内容的父div
  document.body.style.transform = `translateY(${-actualScroll}px)`;
}

// 监听滚轮事件
window.addEventListener("wheel", event => {
  // 根据滚轮方向调整 desiredScroll
  desiredScroll += event.deltaY;
});

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

登录后复制

代码解释：

desiredScroll：累加滚轮事件的deltaY值，表示用户“想要”滚动到的位置。
actualScroll：通过 actualScroll = actualScroll + (desiredScroll - actualScroll) / delay; 这行代码，实现了一个指数加权移动平均，使得actualScroll平滑地向desiredScroll靠近。delay值越大，过渡越平滑，但响应速度越慢。
updateTransform()：将-actualScroll的值应用到body元素的transform: translateY()属性上。注意是负值，因为我们希望内容向上移动时，actualScroll是正值。
requestAnimationFrame(updateScroll)：这是Web浏览器提供的优化动画的API。它会在浏览器准备好渲染下一帧时调用回调函数，确保动画与浏览器刷新率同步，从而避免卡顿并节省电量。

高级特性与优化

上述基本实现已经能提供一个平滑的滚动体验，但它缺少一些关键功能，例如滚动边界限制和类似iPhone的回弹效果。

1. 滚动边界与回弹效果

我们需要确保desiredScroll不会超出内容的实际可滚动范围（0到最大滚动高度），并可以在超出边界时提供一个视觉上的“拉伸”或“回弹”效果。

北极象沉浸式AI翻译

免费的北极象沉浸式AI翻译 - 带您走进沉浸式AI的双语对照体验

查看详情

// script.js (进阶版本)

let desiredScroll = 0;
let actualScroll = 0;

function updateScroll() {
  const delay = 10; // 平滑因子
  // 计算最大可滚动高度
  const maxScrollHeight = document.body.clientHeight - window.innerHeight;

  // 处理滚动边界：当desiredScroll超出范围时，减缓其变化速度，实现回弹效果
  if (desiredScroll < 0) {
    // 向上滚动超出顶部，减缓滚动速度
    desiredScroll -= desiredScroll / (delay / 2);
  } else if (desiredScroll > maxScrollHeight) {
    // 向下滚动超出底部，减缓滚动速度
    desiredScroll -= (desiredScroll - maxScrollHeight) / (delay / 2);
  }

  // actualScroll 逐渐逼近 desiredScroll
  actualScroll = actualScroll + (desiredScroll - actualScroll) / delay;

  // 当 actualScroll 非常接近 desiredScroll 时，直接设置为相等，避免无限小的浮点数计算
  if (Math.abs(actualScroll - desiredScroll) < 1) {
    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;

  // 根据当前desiredScroll位置和滚轮方向，调整desiredScroll的增量
  if (desiredScroll < 0 && scroll < 0) {
    // 已经超出顶部，继续向上滚动时，减半滚动量
    desiredScroll += scroll / 2;
  } else if (desiredScroll > maxScrollHeight && scroll > 0) {
    // 已经超出底部，继续向下滚动时，减半滚动量
    desiredScroll += scroll / 2;
  } else {
    // 正常滚动
    desiredScroll += scroll;
  }
});

window.requestAnimationFrame(updateScroll);

登录后复制

CSS 调整（可选）：

为了更好地展示回弹效果，可以给body添加一些padding，这样内容可以稍微超出视口。

/* style.css (进阶版本) */
html, body {
  margin: 0;
  padding: 0;
}

html {
  background-color: #334499;
}

body {
  overflow: hidden;
  min-height: 100vh;
  padding: 20px 0; /* 增加上下内边距，以便内容可以轻微超出视口 */
}

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

登录后复制

2. 横向滚动适配

如果需要实现横向的平滑粘性滚动，原理是完全相同的。只需将translateY改为translateX，并将相关高度计算改为宽度计算即可。

// 示例：横向滚动
// document.body.style.transform = `translateX(${-actualScroll}px)`;
// maxScrollWidth = document.body.scrollWidth - window.innerWidth;
// ...

登录后复制

3. 触摸设备支持

对于触摸设备，你需要监听touchstart、touchmove和touchend事件。

touchstart记录初始触摸点。
touchmove计算手指移动的距离，并将其转换为desiredScroll的变化量。
touchend处理惯性滚动（可选）。这通常比滚轮事件处理更复杂，需要考虑多点触控、滑动速度和方向等。

4. 吸附点（Snapping Points）

在现有平滑滚动系统的基础上，可以添加吸附功能。例如，可以定义一系列目标滚动位置（如每个区块的顶部）。在每次滚动结束或用户停止滚动时，计算actualScroll最近的吸附点，然后将desiredScroll设置为该吸附点，系统就会平滑地滚动到那里。这可以通过在updateScroll函数中加入额外的逻辑来判断是否需要吸附，或者在wheel事件处理中，根据滚轮的deltaY，直接将desiredScroll调整到下一个或上一个吸附点。