目的：

文章目录

一、实现效果

列表内容无缝连接向上滚动
鼠标移入，滚动停止；
鼠标移出，滚动继续

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、实现原理

1.html页面构成

1、ul>li,
ul外面包裹一层div,如果想要内容循环滚动无缝衔接，需要在原有ul后面还要有一个一样内容的ul。如下图：

红色框内为可视区域div（滚动区域）
　　 代码如下（示例）：

 
{item.k1}{item.k2}{item.k3}{getRank(item.k61)}{getRank(item.k62)}))

 

2.CSS样式

实现滚动需要2个ul的高度大于外层可视高度div，注意div需设置overflow:hidden;

代码如下（示例）：

{list.map((item, index) => ( hoverHandler(false)}onMouseLeave={() => hoverHandler(true)}>{item.k1}{item.k2}{item.k3}{getRank(item.k61)}{getRank(item.k62)}))}

2.读入数据

代码如下（示例）：

 .deviceListItem {display: flex;justify-content: space-between;align-items: center;color: #fff;height: 36px;/* 必须 */background: url("@/assets/dashboard/system-device-list-bg.png") no-repeat;background-size: 100% 100%;margin: 14px 20px 14px 20px;span {width: 20%;text-align: center;font-size: 14px;font-family: Source Han Sans CN;font-weight: 500;}.item {color: rgba(26, 201, 255, 1);}.color {color: rgba(67, 245, 254, 1);}.color1 {color: rgba(242, 252, 156, 1);}.color2 {color: rgba(172, 16, 16, 1);}}.parent {width: 100%;height: 100%;/* 此处因父组件给了其固定宽度，所以设置为100%*/margin-top: 10px;overflow-y: hidden;/* 必须 */scrollbar-width: none;-ms-overflow-style: none;}.parent::-webkit-scrollbar {display: none;}/*设置的子盒子高度大于父盒子，产生溢出效果*/.child {height: auto;}.child li {// width: 100%;height: 36px;display: flex;justify-content: space-between;list-style-type: none;font-weight: 300;font-size: 10px;// width: 100%;}
 

2.整片代码

代码如下（示例）：

 import React, { useEffect, useRef, useState } from "react";
 import styles from "../index.less";
 import { Progress } from "antd";const Carousel = ({ data }) => {// 此处data为父组件传过来的数据，为数组格式const [list]: any = useState(data);const [isScrolle, setIsScrolle] = useState(true);// 滚动速度，值越小，滚动越快const speed = 100;const warper: any = useRef();const childDom1: any = useRef();const childDom2: any = useRef();// 开始滚动useEffect(() => {// 多拷贝一层，让它无缝滚动childDom2.current.innerHTML = childDom1.current.innerHTML;let timer;if (isScrolle) {timer = setInterval(() =>// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0warper.current.scrollTop >= childDom1.current.scrollHeight? (warper.current.scrollTop = 0) : warper.current.scrollTop++,speed);}return () => {clearTimeout(timer);};}, [isScrolle]);// 鼠标移入div时暂停滚动 鼠标移出div后继续滚动，设置boolean,true为动，false为停const hoverHandler = (flag) => setIsScrolle(flag);const getRank = (value) => {return value && value !== "-"? `${Number((Number(value) * 100).toFixed(2))}%`: "-";};const getColor = (value) => {const num: any = Number((Number(value) * 100).toFixed(2));if (num >= 90) {return "color";} else if (num >= 80 && num < 90) {return "color1";} else if (num < 80) {return "color2";} else {return "";}};return (<>
{list.map((item, index) => ( hoverHandler(false)}onMouseLeave={() => hoverHandler(true)}>{item.k1}{item.k2}{item.k3}{getRank(item.k61)}{getRank(item.k62)}))}
);
 };export default Carousel;

总结

1、使用ref
2、设置2个同等div(可视区域)，实现无缝滚动