表の循環スクロール (自分自身を記録)

<div class="ranking_table_box">
            <div class="ranking_table">
              <div
                class="ranking_table_tbody"
                :style="{ transform: `translate(0px,-${scrollTop}px)`, transition: 'all 0ms ease-in 0s' }"
              >
                <div
                  ref="tableScrollOne"
                  class="ranking_table_tbody_box"
                  @mouseenter="tableMouseOver"
                  @mouseleave="tableMouseOut"
                >
                  <div v-for="(item, index) in areaData" :key="index" class="ranking_table_tbody_tr flex_row">
                    <div class="ranking_table_tbody_td other_row" style="width: 10%" :title="item.sortStr">
                      <div
                        v-if="item.sort <= 3"
                        class="sort_img"
                        :class="
                          item.sort == 1 ? 'one_img' : item.sort == 2 ? 'two_img' : item.sort == 3 ? 'three_img' : ''
                        "
                      ></div>
                      <div v-else>{
   
   { item.sortStr }}</div>
                    </div>
                    <div class="ranking_table_tbody_td txt_center" style="width: 30%">{
   
   { item.area }}</div>
                    <div class="ranking_table_tbody_td txt_center" style="width: 30%">{
   
   { item.yearDischarge }}</div>
                    <div class="ranking_table_tbody_td txt_center default_color" style="width: 30%">{
   
   {
                      item.targetDischarge
                    }}</div>
                  </div>
                </div>
                <div ref="copyTableOne" class="ranking_table_tbody_box"></div>
              </div>
            </div>
          </div>

// 滚动处理方法
      const tableScrollAffair = (): void => {
        state.timer = setInterval(() => {
          state.scrollTop++;
          // 获取需要滚动的盒子的高度
          let scrollItemBox = null;
           scrollItemBox = state.tableScrollOne.offsetHeight;
          // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
          if (state.scrollTop >= scrollItemBox) {
            state.scrollTop = 0;
          }
        }, state.speed);
      };
      // 初始化列表滚动
      const initScroll = (): void => {
        nextTick(() => {
          state.copyTableOne.innerHTML = state.tableScrollOne.innerHTML;
          tableScrollAffair();
        });
      };
      // 鼠标移出
      const tableMouseOut = (): void => {
        tableScrollAffair();
      };
      // 鼠标移入
      const tableMouseOver = (): void => {
        clearInterval(state.timer);
      };

.ranking_table_box {
          max-height: vh(260);
          position: relative;
          width: 100%;
          overflow: hidden;
          .ranking_table {
            width: 100%;
            color: rgba(255, 255, 255, 0.8);
            font-size: vw(14);
            font-family: Source Han Sans CN;
            .ranking_table_tbody {
              height: vh(260);

              .ranking_table_tbody_box {
                box-sizing: border-box;
                overflow: hidden;
                .ranking_table_tbody_tr {
                  justify-content: space-between;
                  box-sizing: border-box;
                  padding: 0 vw(18) 0 vw(11);
                  .ranking_table_tbody_td {
                    height: vh(48);
                    line-height: vh(48);
                    width: 20%;
                    justify-content: end;
                    align-items: center;
                    .td_img {
                      width: vw(40);
                      height: vh(20);
                    }
                    .sort_img {
                      width: vw(24);
                      height: vw(24);
                      margin-left: vw(5);
                    }
                  }
                }
                .ranking_table_tbody_tr:nth-of-type(odd) {
                  background-color: rgba(52, 149, 255, 0.06);
                }
              }
            }
          }
        }