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

努力挣钱的小鑫

已于 2024-03-13 11:35:59 修改

阅读量408

点赞数 1

分类专栏： JavaScript/TypeScript 文章标签：前端

于 2024-03-13 11:35:48 首次发布

本文链接：https://blog.csdn.net/IAIPython/article/details/136675454

版权

JavaScript/TypeScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

文章介绍了如何在JavaScript中通过DOM操作实现滚动视频表格的自动滚动功能，包括帧动画和鼠标悬停控制，以及一种定时器方案的替代方法。

摘要由CSDN通过智能技术生成

效果

滚动视频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);
};