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

前言

在现代 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;
}

功能解析:

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

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

  2. 实现滚动逻辑:

    组件定义了一个名为 to 的函数,用于处理滚动事件。该函数接受一个参数 dir,用于指定滚动的方向("left" 或 "right")。

  3. 计算滚动距离:

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

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

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

  4. 执行滚动:

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

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

相关推荐
IT_陈寒20 分钟前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
袁煦丞34 分钟前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧36 分钟前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i44 分钟前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____1 小时前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �1 小时前
前端转Java,从0到1学习教程
java·前端·学习
小奋斗1 小时前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试
萌萌哒草头将军1 小时前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_405023371 小时前
webpack 学习
前端·学习·webpack
云中雾丽1 小时前
flutter中 Future 详细介绍
前端