【JavaScript】requestAnimationFrame 实现表格的流畅滚动

效果

滚动视频demo

实现

// tableRow: 表格滚动的dom
const tableRow = ref<HTMLElement | null>(null);

onMounted(() => {
  nextTick(() => {
    scroll();
  });
});

// 自动滚动
const scroll = () => {
  let isScroll = true;
  // 帧动画实现滚动
  const step = () => {
    if (isScroll && tableRow.value) {
      tableRow.value.scrollTop += 1; // 设置滚动速度
      if (
        tableRow.value.clientHeight + tableRow.value.scrollTop ==
        tableRow.value.scrollHeight
      ) {
        tableRow.value.scrollTop = 0;
      }
      requestAnimationFrame(step);
    }
  };
  step();

  // 鼠标放上去，停止滚动；移开，继续滚动
  tableRow.value?.addEventListener('mouseenter', () => {
    isScroll = false;
  });
  tableRow.value?.addEventListener('mouseleave', () => {
    if (isScroll === false) {
      isScroll = true;
      step();
    }
  });

  // 定时器方案
  // setInterval(() => {
  //   if (isScroll && tableRow.value) {
  //     tableRow.value.scrollTop += 1; // 设置滚动速度
  //     if (
  //       tableRow.value.clientHeight + tableRow.value.scrollTop ==
  //       tableRow.value.scrollHeight
  //     ) {
  //       tableRow.value.scrollTop = 0;
  //     }
  //   }
  // }, 50);
};