前端实现无限循环滚动三种方式（react hooks示例）：js || css || 插件

已于 2022-05-30 08:42:52 修改
阅读量8.7k 收藏 25
点赞数 7
分类专栏： react 文章标签： react.js javascript
于 2022-05-07 15:42:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43794073/article/details/124632111
版权

一、js 滚动事件 scroll

  1. 鼠标移入停止自动滚动，且可以手动上下滚动，可以随时滚动到顶部或底部；鼠标移出自动滚动。
  2. 滚动数据根据需要改为图片或html元素，或者从接口读取数据组装元素。
  3. 实现首尾衔接的思路，分为每条数据固定高度、每条数据不固定高度。如果每条数据固定高度，计算一条数据的高度，每滚动一条数据的高度，就把第一条数据 shift 删除， push 放到末尾；如果每条数据不固定高度，元素渲染完成后，动态计算并保留每条数据外层元素的高度和边距，假设为 height，滚动距离达到 height，则 shift 这条数据并 push 末尾。但首尾衔接，在手动滚动到顶部或底部，回不到数据最初始的状态。
  4. 横向滚动，将 clientHeight，scrollHeight，scrollTop 改为 对应横向属性值。
  5. 渲染数据变化时，或者在模态框中渲染，或依据一些外在条件变化而需要重新渲染时，必须清除所有定时器。
  6. 封装组件使用，需考虑：依赖项，滚动方向，速率，每条数据渲染形式。
  7. 实际开发如果出现滚动停不下来，或者滚动速度加快，排查是否有地方没有及时清除定时器。

在这里插入图片描述

代码
import { useState, useEffect, useRef } from 'react'

// 定时器
let intervalTimer, timeoutTimer

const Index = () => {
    // 滚动容器
    const domRef = useRef()

    // 滚动数据
    const [list, setList] = useState([])

    useEffect(() => {
        // 模拟数据
        const arr = new Array()
        for(let i = 0; i < 30; i++) {
            const obj = {
                key: i,
                value: `第 ${i + 1} 条数据`
            }
            arr.push(obj)
        }
        setList(arr)
    }, [])

    useEffect(() => {
        if(domRef.current) {
            // 开始滚动
            autoScroll()
            // 鼠标移入，清除滚动
            domRef.current.onmouseenter = () => {
                window.clearInterval(intervalTimer)
                window.clearTimeout(timeoutTimer)
            }
            // 鼠标离开，重新滚动
            domRef.current.onmouseleave = () => {
                autoScroll()
            }
        }
    }, [domRef])

    const autoScroll = () => {
        if(timeoutTimer) {
            window.clearTimeout(timeoutTimer)
        }
        timeoutTimer = setTimeout(() => {
            // 容器高度
            const clientH = domRef.current && domRef.current.clientHeight || 0
            // 滚动高度
            const scrollH = domRef.current && domRef.current.scrollHeight || 0
            if(intervalTimer) {
                window.clearInterval(intervalTimer)
            }
            // 无滚动
            if(scrollH == clientH) return
            intervalTimer = setInterval(() => {
                if(domRef.current) {
                    const scrollTop = domRef.current.scrollTop
                    const distance = scrollH - clientH
                    // 计算滚动距离
                    if(scrollTop >= distance) {
                        // 滚动距离大于可滚动高度时，回到顶部
                        domRef.current.scrollTop = -1
                    }
                    domRef.current.scrollTop += 1
                }
            }, 40)
        }, 2000)
    }

    return (
        <div ref={domRef} style={{width: 300, height: 500, overflow: 'auto'}}>
        {
            list.map(item => <li key={item.key}>{item.value}</li>)
        }
    </div>
    )
}

export default Index

二、css

  1. 鼠标移入停止自动滚动，不能手动滚动；鼠标移出自动滚动。
  2. 主要利用 animation 动画属性，定义 keyframes 动画，动态改变元素 y 坐标。
  3. translateY 移动的距离值，是根据每条元素的高度和容器高度来计算的，比如容器高度500，总共30条数据，每条数据高度22，translateY = 22 * 30 - 500 = 160，再根据实际展示效果微调。
代码
import { useState, useEffect } from 'react'

import styles from './index.less'

const Index = () => {
    // 滚动数据
    const [list, setList] = useState([])

    useEffect(() => {
        // 模拟数据
        const arr = new Array()
        for (let i = 0; i < 30; i++) {
            const obj = {
                key: i,
                value: `第 ${i + 1} 条数据`
            }
            arr.push(obj)
        }
        setList(arr)
    }, [])

    return (
        <div className={styles.wrap}>
            {
                list.map(item => <li key={item.key} className={styles.list}>{item.value}</li>)
            }
            {/* 把数据重复渲染一次，效果即是首尾衔接，对应的位移高度需要加上容器高度，即 translatY(-(160 + 500)) = translatY(-660) */}
            {/* {
                list.map(item => <li key={item.key} className={styles.list}>{item.value}</li>)
            } */}
        </div>
    )
}

export default Index


.wrap {
    width: 500px;
    height: 500px;
    overflow: hidden;

    .list {
        width: 300px;
        height: 22px;
        position: relative;
        -webkit-animation-name: vscroll;
           -moz-animation-name: vscroll;
             -o-animation-name: vscroll;
                animation-name: vscroll;
        -webkit-animation-duration: 5s;
           -moz-animation-duration: 5s;
             -o-animation-duration: 5s;
                animation-duration: 5s;
        -webkit-animation-direction: normal;
           -moz-animation-direction: normal;
             -o-animation-direction: normal;
                animation-direction: normal;
        -webkit-animation-iteration-count: infinite;
           -moz-animation-iteration-count: infinite;
             -o-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
           -moz-animation-timing-function: linear;
             -o-animation-timing-function: linear;
                animation-timing-function: linear;
    }
}


.wrap:hover .list {
    -webkit-animation-play-state: paused;
}

@-webkit-keyframes vscroll {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-160px);
        transform: translateY(-160px);
    }
}

@-moz-keyframes vscroll {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
             transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-160px);
        -moz-transform: translateY(-160px);
             transform: translateY(-160px);
    }
}

@-o-keyframes vscroll {
    0% {
        -webkit-transform: translateY(0);
        -o-transform: translateY(0);
           transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-160px);
        -o-transform: translateY(-160px);
           transform: translateY(-160px);
    }
}

@keyframes vscroll {
    0% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
          -o-transform: translateY(0);
             transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-160px);
        -moz-transform: translateY(-160px);
          -o-transform: translateY(-160px);
             transform: translateY(-160px);
    }
}

三、插件（react-fast-marquee、animejs）

示例：react-fast-marquee
  1. 鼠标移入停止自动滚动，不能手动滚动；鼠标移出自动滚动。
  2. 无法点击单个元素触发事件，marquee 把点击作为了开始和暂停滚动的属性，需要修改源码使用。
  3. marquee 只能左右滚动，竖向滚动需要自定义样式覆盖以及编写动画（黑科技：把容器旋转90°，但样式写起来比较麻烦）。
  4. 使用时需要根据需求重写或覆盖样式。
关键代码
import Marquee from 'react-fast-marquee'

<Marquee
paruseOnHover
direction='left'
speed={8}
className='mymarquee'
>
{
	list.map(item => <li key={item.key}>{item.value}</li>)
}
</Marquee>

// 去除默认的半透明背景
.marquee-container .overlay::before, .marquee-container .overlay::after {
	background: none;
}

// 竖向滚动
.mymarquee .marquee {
	// 默认 flex 布局，根据实际作更改
	display: block !important;
	// 改为竖向
	animation: vscroll var(--duration) linear var(--delay) var (--iteration-count);
}

// 竖向滚动动画
@keyframes vscroll {
	0% {
		transform: translateY(0%)
	}
	100% {
		transform: translateY(-100%)
	}
}
梅花三
关注
  • 7
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
JS实现无缝循环marquee滚动效果
12-29
无缝循环marquee滚动JS代码实现，兼容IE, FireFox, Chrome，供大家参考，具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; padding-top: 5px; } #marquee_zxd img { height: 100px; } <!--　横向一定要是span --> <spa
react无缝滚动_react 实现一个无限循环的轮播器 附github地址
weixin_35890184的博客
02-21 1138
一个简单的轮播为了更具有通用和参考性,轮播组件中，轮播只使用了react,没有添加其他的状态管理，或者参数类型限制的库. 所以这个轮播的方法，同样可以用于vue 等其他框架github地址最终效果显示无限循环原理如图所示，如果轮播里面有三个部分，那么可以在首端前添加一个跟最后一块一样的dom节点，同理在最末端添加跟首端相同的节点，这样当轮播到末端，在下一张的情况下，就可以无缝衔接首端的节点，然后当...
前端虚拟滚动列表 vue虚拟列表
夜空孤狼啸的博客
03-31 666
前端虚拟滚动列表 vue虚拟列表。在大型的企业级项目中经常要渲染大量的数据，这种长列表是一个很普遍的场景，当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题；大数据量列表性能优化，减少真实dom的渲染看图：绿色是显示区域，绿色和蓝色中间属于预加载：解决滚动闪屏问题；大致了解了流程在往下看；
react实现列表向上自动滚动（二：hooks写法）
ZhaoYulin6的博客
05-31 1554
import React, { useState, useEffect, useRef } from 'react' const MarqueeBox = (props) => { const [data, setData] = useState([]); //滚动的数据 const [step, setStep] = useState(1) //滚动距离 const [top, setTop] = useState(0) //滚动距离 const [scro...
react-fast-marquee 赞赞赞，react走马灯
weixin_50736511的博客
07-03 942
1.安装 2.引用 参数
前端自动滚屏
furenqiang的博客
06-08 1343
vue实现滚动效果 一、横向滚动 1、效果演示 1、封装的组件代码如下，直接粘贴即可
React——react-fast-marquee滚动广播效果
HarryHY的博客
02-23 3025
React Fast Marquee 安装 npm install react-fast-marquee --save 引入 import Marquee from "react-fast-marquee"; 使用 <Marquee pauseOnHover={true} speed={60} loop={0}> {marqueedata.map((item) => ( <span className="red">{item.
探索 React 快速滚动组件：React-Fast-Marquee
gitblog_00070的博客
04-11 446
探索 React 快速滚动组件：React-Fast-Marquee 项目地址:https://gitcode.com/justin-chu/react-fast-marquee React-Fast-Marquee 是一个由 Justin Chu 开发的高性能 React 组件，它提供了类似传统 HTML <marquee> 标签的功能，即实现文字或图像的滚动效果，但比原生标签更强大...
react实现列表循环滚动播放
xinxin_csdn的博客
06-18 2576
import React, { Component } from 'react' import { List } from 'antd'; import { connect } from 'react-redux'; import './style.scss'; class TodoList extends Component { scrollTimeout = null; constructor(props) { super(props); this.state = { secti.
react 文字跑马灯
小鑫の随笔
12-08 3468
之前的一个 pc 端项目，有文字滚动的功能，找了下，没有合适的轮子，于是自己造了一个 目前只支持横向滚动 index.tsx import React, { useRef, useEffect, useState } from 'react' import './index.css' import styled from 'styled-components' interface TextScrollProps { /** * 内容 */ content: string /**
文字横向滚动+纵向滚动插件
weixin_45481456的博客
10-21 499
【代码】文字横向滚动。
react-hooks-mobx:React Hooks + MobX指南
05-14
React Hooks + Mobx指南 链接到示例： : 链接到详细指南： : 建立统计 File sizes after gzip: 54.13 KB build\static\js\2.f209cf74.chunk.js 1.46 KB build\static\js\main.2336ad02.chunk.js 779 B build\static\js\runtime-main.bae833a8.js 656 B build\static\css\main.1b00465a.chunk.css 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视
react-scrollbar-size:React钩子来计算浏览器滚动条的大小
04-04
React滚动条大小 React-Scrollbar-Size是一个挂钩，旨在计算用户代理的水平和垂直滚动条的大小。 它还将检测滚动条的大小何时更改，例如用户代理的缩放系数何时更改。 安装 React-Scrollbar-Size作为： :information: 此处引用的示例涉及4.0.0发行候选版，可以使用next标记安装。 自定义钩子语法的早期版本可以在查看。 可以在查看旧版组件语法的早期版本。 $ npm install react-scrollbar-size@next 用法 useScrollbarSize自定义钩子返回具有两个属性的对象： 姓名 描述 width 垂直滚动条的当前宽度 height 当前水平滚动条的高度 例子 要查看实时示例，请按照以下。 打字稿 import React , { CSSProperties , FunctionComponent } from 're
React-Toast:TailwindCSS保留了React +下的自定义推送通知（Toast）实现
05-07
React吐司成分 描述 这是自定义的Toast组件，由react hooks和React Context API实现，并使用tailwindCSS框架隐藏。 随时通过实现启发：)这是我用于项目的UI库的修整。 该组件允许将通知推送到用户屏幕，并在设置时间或默认时间后自动将其删除。 示例实现了以下push-Events： 信息 错误 警告 成功 定制车身 概念 React灵敏 使用挂钩和上下文API 使用Tailwind和Fontawesome（所有功能都可以由端点用户调整） 安装 （!!!软件包在npm上不可用！！！） 克隆仓库git clone https://github.com/damikun/React-Toast.git 恢复包yarn install 生成并运行演示yarn run start 配置API 吐司供应商 通常放置在Providers.tsx或App
web前端自动滚动且点击切换轮播图代码
10-23
用于网站前端开发，页面展示效果动态轮播图滚动，且可点击操作切换轮播图展示代码
hooks-workshops-solutions:React React Hooks研讨会任务的示例解决方案！
05-14
欢迎使用React Hooks解决方案的仓库：useState和useEffect研讨会！ 运行纱线，然后开始纱线。 对于带有星号的任务，没有任何解决方案。 转到App.tsx并取消注释要渲染的一行代码。 有任务列表： 第一阶段-useState ...
共享计时器：一种Web应用程序，您可以在其中创建并与其他人共享计时器。 建立在React Hooks和Firebase之上
02-12
共享计时器基于React和Firebase构建的共享计时器用户可以登录并创建和保存计时器，来宾可以输入计时器代码以获取计时器所有后端互动均通过云功能和Firebase管理员SDK完成不幸的是，由于云功能的工作方式，冷启动时间...
你不需要总是在 React 中使用 useState
ikxin的博客
04-28 368
在我审查的一个拉取请求中，我注意到在许多拉取请求中看到的一种模式。React 组件具有多个 UI 状态，例如。相反，请考虑使用有限状态机(FSM) 模式。FSM 只允许有限数量的状态。在上面的 UI 示例中，单个。的状态，它根据服务器发送的 403 状态代码显示用户是否已解锁该功能。通常情况下，开发人员可能会使用。在某些情况下，例如使用 Tanstack 查询来获取数据时，在编写 React 组件时，请务必考虑是否有必要使用。通常情况下，它们是不必要的。这种方法可以避免使用。进行额外的状态管理。
vue3中reactive和ref的比较
最新发布
qq_42931285的博客
04-29 167
vue3中reactive和ref的比较
react hooks实现滚动数字效果
05-23
可以使用useState和useEffect两个Hooks来实现滚动数字效果。 首先，我们需要定义一个state来保存当前数字的值，以及一个目标数字的值。然后，使用useEffect监听目标数字的变化，当目标数字变化时，启动一个计时器，每隔一定时间更新当前数字的值，直到当前数字等于目标数字。 下面是一个简单的实现示例： ```jsx import React, { useState, useEffect } from 'react'; const ScrollNumber = ({ number }) => { const [currentNumber, setCurrentNumber] = useState(0); const [targetNumber, setTargetNumber] = useState(number); useEffect(() => { setTargetNumber(number); }, [number]); useEffect(() => { let timer = null; if (currentNumber < targetNumber) { timer = setInterval(() => { setCurrentNumber(currentNumber + 1); }, 50); } return () => clearInterval(timer); }, [currentNumber, targetNumber]); return ( <span>{currentNumber.toLocaleString()}</span> ); } export default ScrollNumber; ``` 在上面的示例中，我们定义了一个ScrollNumber组件，接受一个number属性作为目标数字，当number变化时，使用useEffect更新targetNumber的值。然后，使用第二个useEffect监听currentNumber和targetNumber的变化，如果currentNumber小于targetNumber，启动一个计时器，每隔50ms更新一次currentNumber的值，直到currentNumber等于targetNumber。最后，返回一个包含当前数字的span元素。 使用方式如下： ```jsx import React from 'react'; import ScrollNumber from './ScrollNumber'; const App = () => { return ( <div> <h1>ScrollNumber Demo</h1> <ScrollNumber number={123456789} /> </div> ); } export default App; ``` 这样就可以在页面上看到一个滚动数字效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梅花三

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值