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

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

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

本文将深入探讨如何利用 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 自定义指令，使得在项目中应用平滑滚动效果更加便捷。

SEO 优化

为了让更多开发者了解如何打造丝滑顺畅的网页水平滚动体验，我们可以对文章进行一些 SEO 优化：

关键词： 水平滚动, 平滑滚动, JavaScript, Vue 3, 用户体验, 鼠标滚轮, 触控板, 动画效果, 代码示例, 自定义指令

想要打造丝滑流畅的网页水平滚动体验？本文提供详细的 JavaScript 代码示例，教你如何使用 requestAnimationFrame 实现平滑滚动动画，并结合 Vue 3 自定义指令轻松应用于项目中，提升用户体验。

总结

通过以上方法，我们可以轻松地为网站添加平滑的水平滚动效果，显著提升用户体验，为用户带来更愉悦的浏览体验。

希望本文能够帮助你解决水平滚动不流畅的问题，打造更优秀的网页！

常见问题

1. 为什么我的滚动速度很慢？

滚动速度由 scrollAmount 变量控制，你可以尝试增加它的值来提高滚动速度。

2. 如何调整动画的时长？

动画时长由 animateScroll 函数中 progress 的计算方式决定，你可以尝试修改 elapsed / 300 中的 300 来调整动画时长。

3. 我想在移动设备上也实现平滑滚动，应该怎么做？

移动设备上的触摸事件与桌面设备的鼠标滚轮事件不同，你需要监听 touchstart、touchmove 和 touchend 事件，并根据触摸点的位置变化来计算滚动距离。

4. 我在使用 Vue 3 的时候遇到了问题，应该如何解决？

请确保你正确安装了 Vue 3 并正确引入了自定义指令。你也可以参考 Vue 3 官方文档中关于自定义指令的部分。

5. 还有其他方法可以实现平滑滚动吗？

除了使用 JavaScript 实现平滑滚动，你也可以使用 CSS 的 scroll-behavior 属性来实现简单的平滑滚动效果。但需要注意的是，scroll-behavior 属性的浏览器兼容性不如 JavaScript 方案好。