SOURCE

import React,{ Component } from 'react';
import './index.scss';

class ScrollList extends Component {
  constructor(props) {
    super(props);
    this.state = {
    //
    };
  }
  componentDidMount() {
    const area = document.getElementById('scrollBox');
    // 60 * 40
    const iliHeight = 36;
    const speed = 50;
    let time;
    const delay = 2000;
    area.scrollTop = 0;
    // area.innerHTML += area.innerHTML;
    function startScroll() {
      time = setInterval(() => {
        scrollUp()
      }, speed);
      area.scrollTop++;
    }

    function scrollUp() {
      if (area.scrollTop % iliHeight === 0) {
        clearInterval(time);
        setTimeout(startScroll, delay);
      } else {
        area.scrollTop++;
        if (area.scrollTop >= area.scrollHeight / 2) {
          area.scrollTop = 0;
        }
      }
    }
    setTimeout(startScroll, delay);
  }
  render() {
    return(
      <div className="marquee" id="scrollBox">
        <ul>
          <li>START</li>
          <li>让我掉下眼泪的 不止昨夜的酒</li>
          <li>让我依依不舍的 不止你的温柔</li>
          <li>余路还要走多久 你攥着我的手</li>
          <li>让我感到为难的 是挣扎的自由</li>
          <li>分别总是在九月 回忆是思念的愁</li>
          <li>深秋嫩绿的垂柳 亲吻着我额头</li>
          <li>在那座阴雨的小城里 我从未忘记你</li>
          <li>成都 带不走的 只有你</li>
          <li>直到所有的灯都熄灭了也不停留</li>
          <li>end end end</li>
          <li>START</li>
          <li>让我掉下眼泪的 不止昨夜的酒</li>
          <li>让我依依不舍的 不止你的温柔</li>
          <li>余路还要走多久 你攥着我的手</li>
          <li>让我感到为难的 是挣扎的自由</li>
          <li>分别总是在九月 回忆是思念的愁</li>
          <li>深秋嫩绿的垂柳 亲吻着我额头</li>
          <li>在那座阴雨的小城里 我从未忘记你</li>
          <li>成都 带不走的 只有你</li>
          <li>直到所有的灯都熄灭了也不停留</li>
          <li>end end end</li>
        </ul>
      </div>
    )
  }
}

export default ScrollList;

.marquee {
  height: 220px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 6px 0 12px;
  margin-top: 10px;
}
ul {
  overflow: hidden;
}
li {
  font-size: 16px;  
  line-height: 36px;
  white-space: nowrap;
  width: 100%;
  color: #d2e0f3;
  cursor: pointer;
  height: 36px;
}