介绍

在项目的开发过程中，当数据或者图片超出容器盒子时，需要实现数据的循环滚动效果。

组件源码

import styles from './styles.less';
import React, { Component } from 'react';
//引入示例图片
import codepopuptwo from '@/assets/doscreen/codepopuptwo.png'

class demo extends Component {
    
    state = { 
        timer: null, //定时器
     }

    componentDidMount() {
        this.onactive()
    }
    componentWillUnmount() {
        if (this.state.timer !== null) {
            clearInterval(this.state.timer)
        }
    }


    ScrollUp = () =>
    {
        var con1 = document.getElementById("core");
        con1.scrollTop += 1.5;
        if (Math.ceil(con1.scrollTop) >= parseFloat(con1.scrollHeight - con1.clientHeight))
        {
            con1.scrollTop = 0;
        } 
    }

   //开启定时器
    onactive = () => {
        var speed = 30;
        let newTimer = setInterval(() =>
        {
            this.ScrollUp()
        }, speed)
 
        this.setState({
            timer:newTimer
        })
    }

    render() { 
        const {timer} = this.state
        return ( 
            <>
                <div className={styles.box} id='box' onMouseLeave={() =>
                {
                    if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
                    this.onactive()
                }} onMouseEnter={() =>
                {
                    if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
                    clearInterval(timer)
                }}>
                    <div className={styles.core} id='core'>
                        <img src={codepopuptwo} alt='演示图片'/>
                        <img src={codepopuptwo} alt='演示图片'/>
                        <img src={codepopuptwo} alt='演示图片'/>
                        <img src={codepopuptwo} alt='演示图片'/>
                        <img src={codepopuptwo} alt='演示图片'/>
                        <img src={codepopuptwo} alt='演示图片'/>
                    </div>
                </div>
            </>
         );
    }
}
 
export default demo;

css样式

.box {
    width: 883px;
    height: 160px;
}

.core {
    overflow-y: scroll;
    height: 160px;
    cursor: pointer;
}

实现效果