目录

实现水平滚动功能的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",以实现平滑滚动的效果。

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
vvilkim3 小时前
深入理解 TypeScript 中的 implements 和 extends:区别与应用场景
前端·javascript·typescript
GISer_Jing3 小时前
前端算法实战:大小堆原理与应用详解(React中优先队列实现|求前K个最大数/高频元素)
前端·算法·react.js
写代码的小王吧4 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
小小小小宇5 小时前
CSS 渐变色
前端
snow@li5 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇6 小时前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)6 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy6 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七6 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七6 小时前
14.Python Socket客户端开发指南
前端·python