如何打造丝滑顺畅的网页水平滚动体验？

2024-08-07 00:33:07

打造丝滑顺畅的水平滚动体验

你是否正在构建一个桌面端水平滚动的网站？你是否发现默认的滚动效果不够流畅，用户体验不佳？网页水平滚动，常常被应用于图片轮播、产品展示、时间线等场景，它能够在有限的空间内展示更多内容，提升用户浏览体验。然而，默认的网页水平滚动往往不够流畅，用户在使用鼠标滚轮或触控板操作时，容易感到卡顿，影响观感。

本文将深入探讨如何利用 JavaScript 创建丝滑顺畅的水平滚动体验，并提供可直接应用于你项目的代码示例，帮助你解决水平滚动不流畅的问题，打造更优秀的网页！

网页水平滚动不流畅，问题出在哪？

在探究解决方案之前，我们先来了解一下，为什么默认的网页水平滚动会让人感觉不流畅？

浏览器默认的水平滚动行为是基于固定像素的页面跳转，这意味着每次滚动，页面都会跳跃固定的距离。这种方式虽然简单直接，但在用户看来，滚动过程不够平滑，尤其是在使用鼠标滚轮或触控板进行滚动操作时，这种不连贯的感觉会更加明显。

JavaScript平滑滚动动画，让滚动体验更丝滑

为了解决这个问题，我们需要借助 JavaScript 来实现平滑滚动动画效果。

以下是使用 requestAnimationFrame API 实现平滑水平滚动的 JavaScript 代码示例：

function smoothHorizontalScroll(e) {
  e.preventDefault(); // 阻止默认滚动行为

  // 计算滚轮滚动方向和距离
  const delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  
  // 设置每次滚动的距离，可调整数值控制滚动速度
  const scrollAmount = delta * 80; 

  let startTime = null; // 记录动画开始时间

  function animateScroll(timestamp) {
    if (startTime === null) {
      startTime = timestamp;
    }

    // 计算动画执行时间和进度
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / 300, 1); // 调整动画时长

    // 根据动画进度滚动页面
    window.scrollBy(scrollAmount * progress, 0); 

    // 递归调用自身，实现动画效果
    if (progress < 1) {
      requestAnimationFrame(animateScroll);
    }
  }

  requestAnimationFrame(animateScroll);
}

// 监听鼠标滚轮事件，并调用 smoothHorizontalScroll 函数
window.addEventListener('wheel', smoothHorizontalScroll);

代码解析：

smoothHorizontalScroll(e) 函数：
- e.preventDefault();：阻止默认的滚动行为，使得我们可以接管滚动的控制权。
- delta：计算滚轮滚动方向和距离。e.wheelDelta 和 -e.detail 分别对应不同浏览器对滚轮事件的处理方式。
- scrollAmount：设置每次滚动的距离，可以通过调整数值控制滚动速度。
- startTime：记录动画开始时间，用于计算动画执行时间。
- animateScroll(timestamp) 函数：
  - elapsed：计算动画执行时间，单位为毫秒。
  - progress：计算动画进度，范围 0 到 1，代表动画完成的百分比。
  - window.scrollBy(scrollAmount * progress, 0)：根据动画进度滚动页面。scrollBy() 方法用于将页面滚动指定的像素数量，此处我们只滚动水平方向。
  - requestAnimationFrame(animateScroll)：递归调用自身，实现动画效果。requestAnimationFrame 会在下一次浏览器重绘之前调用传入的函数，从而创建平滑的动画效果。
window.addEventListener('wheel', smoothHorizontalScroll);：监听鼠标滚轮事件，并在每次触发滚轮事件时调用 smoothHorizontalScroll 函数。

Vue 3 中的应用

如果你正在使用 Vue 3 构建项目，可以将以上代码封装成一个自定义指令，方便在项目中复用：

1. 创建自定义指令文件 smooth-scroll.js：

export default {
  mounted(el) {
    el.addEventListener('wheel', (e) => {
      // ... 将上述 smoothHorizontalScroll 函数代码粘贴到这里
    });
  },
};

2. 在组件中引入并使用自定义指令：

<template>
  <div v-smooth-scroll> 水平滚动区域 </div>
</template>

<script>
import smoothScroll from './smooth-scroll.js';

export default {
  directives: {
    smoothScroll,
  },
};
</script>

代码解析：

我们首先将 smoothHorizontalScroll 函数的代码放到了自定义指令 smooth-scroll.js 的 mounted 生命周期钩子函数中，这个函数会在指令绑定到的元素插入 DOM 后调用，确保我们能够正确监听元素的滚轮事件。
然后，在 Vue 组件中，我们通过 directives 选项注册了名为 smooth-scroll 的自定义指令。
最后，在模板中，我们使用 v-smooth-scroll 指令将自定义指令绑定到需要实现平滑滚动的元素上。

通过以上步骤，我们就成功地将平滑滚动功能封装成了一个可复用的 Vue 3 自定义指令，使得在项目中应用平滑滚动效果更加便捷。