列表一条一条滚动

        <div class="seamless-warp">
          <ul class="contList" ref="scrollRef">
            <li class="li" v-for="(item, index) in listData" :key="index">
              <div class="row row1" :title="item.companyName">{{ item.companyName }}</div>
              <div class="row row2" :title="item.visitCarNum">{{ item.visitCarNum || 0 }}</div>
              <div class="row row3" :title="item.abnormalCarNum">{{ item.abnormalCarNum || 0 }}</div>
            </li>
          </ul>
        </div>


  mounted() {
    this.timer = setInterval(() => {
      this.protectSroll()
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer1) {
      clearInterval(this.timer1)
      this.timer1 = null
    }
  }

// 滚动
    protectSroll() {
      const viewNum = 3
      const size = 1.625
      this.$nextTick(() => {
        if (this.listData.length >= (viewNum + this.num)) {
          this.$refs.scrollRef.style.top = -(this.num * size) + 'rem'
          this.num++
        } else {
          this.num = 0
          this.$refs.scrollRef.style.top = 0
        }
      })

    }





  .seamless-warp {
    width: 100%;
    height: 150px;
    // height: calc(100% - 95px);
    overflow: hidden;
    margin-bottom: 5px;
    position: relative;

    .contList {
      width: 100%;
      height: 100%;
      position: absolute;
      transition: all .5s;
    }

    .li {
      margin: 15px 10px;

      .row1 {
        text-align: left;
      }

      // background-color: #fff;
      &::before {
        content: '';
        display: inline-block;
        width: 15px;
        height: 15px;
        vertical-align: middle;
        background-image: url('../assets/li-icon.png');
        background-size: 100% 100%;
        margin-right: 10px;
      }
    }
  }

React版本

import { connect } from 'umi';
import styles from '../style.less';
import ScrollBox from '@/components/ScrollBox';
import dayjs from 'dayjs';

const PatrolTask = () => {
  const items = [
    {
      key: '1',
      date: dayjs(new Date()).format('MM-DD'),
      item: '停留超时报警',
    },
    {
      key: '2',
      date: dayjs(new Date()).format('MM-DD'),
      item: '超出围栏报警',
    },
    {
      key: '3',
      date: dayjs(new Date()).format('MM-DD'),
      item: '停留超时报警',
    },
    {
      key: '4',
      date: dayjs(new Date()).format('MM-DD'),
      item: '超出围栏报警',
    },
    {
      key: '5',
      date: dayjs(new Date()).format('MM-DD'),
      item: '停留超时报警',
    },
    {
      key: '6',
      date: dayjs(new Date()).format('MM-DD'),
      item: '停留超时报警',
    },
    {
      key: '7',
      date: dayjs(new Date()).format('MM-DD'),
      item: '超出围栏报警',
    },
    {
      key: '8',
      date: dayjs(new Date()).format('MM-DD'),
      item: '停留超时报警',
    },
  ];

  return (
    <ScrollBox boxHeight="130px" dataList={items}>
      {items.map((item) => (
        <li key={item.key} className={styles.li}>
          {item.date} {item.item}
        </li>
      ))}
    </ScrollBox>
  );
};

export default connect(({ ChartScreen }) => ({
  ...ChartScreen,
}))(PatrolTask);

组件

import { useEffect, useRef } from 'react';
import styles from './style.less';

function ScrollBox(props) {
  const scrollRef = useRef();
  const {
    dataList = [],
    viewNum = 4,
    size = 1.625,
    gapTime = 1000,
    children,
    boxHeight = '130px',
  } = props;
  let count = 0;

  useEffect(() => {
    let timer = 1;
    clearInterval(timer);
    timer = setInterval(() => {
      const isMax = dataList.length >= viewNum + count;
      scrollRef.current.style.top = isMax ? -(count * size) + 'rem' : 0;
      count = isMax ? (count += 1) : 0;
    }, gapTime);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className={styles.container} style={{ height: boxHeight }}>
      <ul className={styles.ul} ref={scrollRef}>
        {children}
      </ul>
    </div>
  );
}

export default ScrollBox;

styles.less

.container {
  overflow-y: hidden;
  position: relative;

  .ul {
    position: absolute;
    width: 100%;
    transition: all 0.5s;
    margin: 0;

    .li {
      margin: 5px 0;
    }
  }
}