CSS滚动~

1.方框滚动

    #tableitem-biao {
      // animation: scroll 10s linear infinite;
      overflow: hidden;
      overflow-y: auto;
      height: calc(100% - 41px);
      width: 100%;
    }

    #tablebox {
      width: 100%;
      height: auto;
    }

	中间嵌套一层tablebox盒子  里面还有细分的每一项


    ScrollUp2 () {
      var box = document.getElementById("tableitem-biao");
      var con1 = document.getElementById("tablebox");

      if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) {
        box.scrollTop = 0;
      } else {
        box.scrollTop++;
      }
    },
    mouseLeave2 (index) {
      // this.$refs.tooltip2[index].handleClosePopper();
      this.timer2 = setInterval(this.ScrollUp2, 50);
    },
    mouseOver2 (index) {
      if (this.timer2) {
        clearInterval(this.timer2);
        // this.$refs.tooltip2[index].handleShowPopper();
      }
    },

  <div id="tableitem-biao">
    <div id="tablebox">
      <div id="tableitem-xiang" v-for="(item,index) in tablelist" :key="index" @mouseover="mouseOver2(index)" @mouseleave="mouseLeave2(index)">
        <el-tooltip effect="dark" :content="`${item.name}`" placement="top">
          <div class="xiang-item">{{item.name}}</div>
        </el-tooltip>
        <div class="xiang-item flxclass">
          {{item.level}}
        </div>
        <div class="xiang-item">{{item.leder}}</div>
      </div>
    </div>
  </div>

2.横向无缝滚动

            <div id="TongZhi">
              <div class="imgclass">
                <img src="./../../../../static/img/4KHomePage/4K_TongZhi.png" alt="" />
              </div>
              <div class="header-notice-marquee">
                <span class="header-marquee-item1">截止昨日，系统登记管网巡查人员119人，完成巡查记录487次，巡查登记问题796个。</span>
                <span class="header-marquee-item2">截止昨日，系统登记管网巡查人员119人，完成巡查记录487次，巡查登记问题796个。</span>
              </div>
            </div>

    #TongZhi {
      width: calc(100% - 20px);
      margin-left: 20px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      position: relative;
      height: 30px;
      img {
        width: 26px;
        height: 23px;
        vertical-align: middle;
      }

      .header-notice-marquee {
        height: 100%;
        width: calc(100% - 26px);
        position: relative;
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;

        span {
          padding: 0 26px;
          position: absolute;
          left: 26px;
          font-size: 24px;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          color: #ffc73f;
          margin-left: 5px;
          overflow: hidden;
        }
      }

      .header-marquee-item1 {
        animation: marquee1 15s linear 8;
      }

      .header-marquee-item2 {
        animation: marquee2 15s linear 8;
      }

      .header-notice-marquee:hover {
        animation-play-state: paused;
      }

      @keyframes marquee1 {
        0% {
          left: 4%;
        }
        100% {
          left: -150%;
        }
      }

      @keyframes marquee2 {
        0% {
          left: 150%;
        }
        100% {
          left: 4%;
        }
      }
    }

    #TongZhi:hover {
      animation-play-state: paused;
    }