博客

目的：

React实现列表内容自动向上滚动

一、实现效果

列表内容无缝连接向上滚动

鼠标移入，滚动停止；

鼠标移出，滚动继续

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

二、实现原理

1.html页面构成

1、


ul>li


,

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

红色框内为可视区域div（滚动区域）



代码如下（示例）：

 <div className={
   styles.parent} ref={
   warper}>
        <div className={
   styles.child} ref={
   childDom1}>
            <li
              className={
   styles.deviceListItem}
            >
              <span>{
   item.k1}</span>
              <span className={
   styles.item}>{
   item.k2}</span>
              <span className={
   styles.item}>{
   item.k3}</span>
              <span className={
   styles[getColor(item.k61)]}>
                {
   getRank(item.k61)}
              </span>
              <span className={
   styles[getColor(item.k62)]}>
                {
   getRank(item.k62)}
              </span>
            </li>
          ))
        </div>
        <div className={
   styles.child} ref={
   childDom2}></div>
      </div>

2.CSS样式

实现滚动需要2个ul的高度

大于

外层可视高度div，注意div需设置overflow:hidden;

代码如下（示例）：

<ul className={
   styles.child} ref={
   childDom1}>
          {
   list.map((item,<