前言

在现代 Web 开发中，经常需要实现水平滚动功能的容器来展示横向排列的内容。本文将介绍一个使用 React 框架封装的组件，可以轻松实现水平滚动功能。这是我在项目中使用的一个组件，在这里记录一下。

效果展示

大概效果就是下面这样，比较简单。向右滚动后如下：

代码分析

首先，让我们来看一下组件的代码：

ini 复制代码

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const arr = [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
    22, 23, 24,
  ];
  const ref = useRef();

  const to = (dir) => {
    const current = ref.current;
    const scrollAmount =
      dir === "left"
        ? current.scrollLeft - current.offsetWidth + 10
        : current.scrollLeft + current.offsetWidth - 10;

    ref.current.scrollTo({
      left: scrollAmount,
      behavior: "smooth",
    });
  };

  return (
    <>
      <div className="root" ref={ref}>
        {arr.map((item, index) => (
          <div key={index} className="item">
            {item}
          </div>
        ))}
      </div>
      <button onClick={() => to("left")}>left</button>
      <button onClick={() => to("right")}>right</button>
    </>
  );
}

export default App;

css 复制代码

.root {
  height: 400px;
  width: 990px;
  background-color: #bfa;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 0 10px;
}

.item {
  height: 380px;
  width: 240px;
  flex-shrink: 0;
  background-color: red;
}

功能解析：

这个组件实现了一个水平滚动容器和两个按钮，用户可以通过点击按钮在容器中水平滚动内容。让我们逐个解析组件的功能：

在组件的函数体内部，我们定义了一个名为 arr 的数组，其中包含了一系列数字。这些数字将作为滚动容器中的内容进行展示。我们还使用 useRef 创建了一个名为 ref 的引用，用于获取滚动容器的 DOM 元素。
实现滚动逻辑：

组件定义了一个名为 to 的函数，用于处理滚动事件。该函数接受一个参数 dir，用于指定滚动的方向（"left" 或 "right"）。
计算滚动距离：

在函数体内部，我们首先获取当前容器的 DOM 元素，使用 ref.current 获取到当前的滚动容器。然后，根据传入的滚动方向 dir，我们计算出滚动的距离。

对于向左滚动，我们将当前滚动位置减去容器的宽度，并加上一个偏移量（此处为 10 像素），以确保滚动到正确的位置。计算公式为：current.scrollLeft - current.offsetWidth + 10。

对于向右滚动，我们将当前滚动位置加上容器的宽度，并减去一个偏移量（此处为 10 像素），以确保滚动到正确的位置。计算公式为：current.scrollLeft + current.offsetWidth - 10。
执行滚动：

计算出滚动的距离后，我们使用 ref.current.scrollTo() 方法实现平滑的水平滚动效果。将滚动距离作为参数传入 left 属性，并设置 behavior 属性为 "smooth"，以实现平滑滚动的效果。

这样，我们就完成了一个简单的水平滚动组件。如果有误欢迎指正~~

实现水平滚动功能的React组件

前言

效果展示

代码分析