react 使用react-seamless-scroll实现无缝滚动

Q_Q 忙里偷闲

已于 2024-02-03 10:48:38 修改

阅读量2.5k

点赞数 13

分类专栏： # react 常用示例专栏文章标签： react.js 无缝滚动单步向下滚动

于 2024-02-03 10:38:23 首次发布

本文链接：https://blog.csdn.net/qq_36410795/article/details/136004794

版权

本文介绍了如何在React项目中集成cssSeamlessScroll组件，实现无缝滚动功能，包括向下滚动、数组属性更新和动态加载数据。代码示例展示了如何处理滚动高度、数据渲染以及控制滚动行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 实现无缝滚动效果

实现单步向下滚动

点击更多展开，收起，调整 scroll 高度

请添加图片描述

2. react-seamless-scroll 无缝滚动案例介绍

项目地址 react-seamless-scroll
拉下来跑起来效果（gif录屏有点卡，实际很丝滑）
可以支持多种无缝滚动方案，如 向下滚动，向左滚动，滚动速度，鼠标悬停，单布停顿，单行停顿时间，数组属性更新，数组添加数据，图表滚动 等
react-seamless-scroll 无缝滚动有两种实现方式，一种是 cssSeamlessScroll，另外一种是 jsSeamlessScroll

3. react 项目集成

3.1 项目引入 `cssSeamlessScroll` 滚动组件

1.这里我使用的 cssSeamlessScroll 的。
2. 将 cssSeamlessScroll 组件的代码复制到项目中

在这里插入图片描述

3.2 完整代码

3.2.1 newBet.tsx 代码

import React, {
    useState } from 'react';
import style from '../style/index.module.scss';
// 导入滚动的cssSeamlessScroll
import CssSeamlessScroll from './cssSeamlessScroll/cssSeamlessScroll'

const NewBet = () => {
   
    const [height, setHeight] = useState(320);
    // mock 后端返回数据
    const [arr, setArr] = useState([
        {
    gameName: '象财神', player: 'Dorothy MurrayDorothy Murray', betAmount: 4020, profit: -476.53 },
        {
    gameName: '皇上吉祥', player: '隐身', betAmount: 4020, profit: 516.82 },
        {
    gameName: '水果丛林', player: 'Frederick Long', betAmount: 4020, profit: 809.59 },
        {
    gameName: '唐伯虎点秋香', player: '隐身', betAmount: 4020, profit: -928.13 },
        {
    gameName: '鼠鼠福福', player: 'Adele Moody', betAmount: 4020, profit: -901.85 },
        {
    gameName: '宝石侠-1111', player: 'Maggie Cobb', betAmount: 4020, profit: 135.91 }