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

已于 2024-03-13 11:35:59 修改
阅读量520 收藏 1
点赞数 1
分类专栏： JavaScript/TypeScript 文章标签： 前端
于 2024-03-13 11:35:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IAIPython/article/details/136675454
版权
文章介绍了如何在JavaScript中通过DOM操作实现滚动视频表格的自动滚动功能，包括帧动画和鼠标悬停控制，以及一种定时器方案的替代方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果

滚动视频demo

实现

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

onMounted(() => {
   
  nextTick(() =>
最低0.47元/天 解锁文章
javascript模拟滚动条实现代码
12-02
- 为了实现平滑的滚动效果，可以使用 JavaScript 的定时器（如 `setInterval` 或 `requestAnimationFrame`）来逐渐改变滑块的位置，从而让内容平滑滚动。 10. **响应式设计**： - 虽然代码中没有明确提及，但创建...
react-multiple-scrolls:用于一起滚动多个可滚动内容
05-15
在React开发中，有时我们需要实现一个功能，使得多个可滚动区域可以同步滚动，这在诸如数据对比、长表格等场景中十分常见。"react-multiple-scrolls" 是一个专门解决此类问题的JavaScript库，它允许你创建并管理一组...
el-table使用requestAnimationFrame自动滚动
m0_46506657的博客
06-28 465
vue文件中 el-table使用requestAnimationFrame实现自动滚动。
Vue中使用JavaScript中的requestAnimationFrame动画循环实现循环滚动效果-demo
JackieDYH的博客
01-01 1689
requestAnimationFrame是一个由浏览器提供的 JavaScript 方法，用于在下一次浏览器重绘之前执行指定的回调函数。它接受一个回调函数作为参数，并返回一个整数值，可以用于取消动画循环。使用 requestAnimationFrame 可以创建平滑的动画效果，并且能够有效地控制动画的帧率，以适应不同的设备和浏览器性能。
js实现表格按行滚动
weixin_55510188的博客
09-02 3079
3、滚动控制：为了实现按行滚动，需要拿到div表格的每一行的高度，然后定时、逐行执行滚动（即对tbody滚动高度值定时进行累加，每次累加表格行的高度，然后tbody的style属性的top取滚动高度值的负值）。1、表格模仿table的结构，使用div元素构建，其中在tbody外包了一层div(tbody-container)，以便对超出tbody-container的内容进行隐藏。最近又有同样的需求，不过是vue项目，所以又做了一个基于 js实现的表格按行滚动，原理相同。优化了表格内容见底后即滚回顶部。
【requestAnimationFrame 实现无限滚动】
hui_web的博客
10-09 807
广告位无限滚动
requestAnimationFrame实现全屏滚动评论
weixin_45485922的博客
05-17 485
前言 结合具体场景实战requestAnimationFrame 业务场景： h5 技术： vue2 vant2 评论可以自动的向上滚动 并且可以手动拖拉滚动条 查看上面的评论 你可以把requestAnimationFrame认为是浏览器内部提供的一个钩子函数，执行时间是在 每一帧渲染开始前执行 是不会阻塞js 主线程执行 ，也不会触发多余的重绘操作 下面是简单的demo 代码 代码比较简单就直接贴出来 //commentView.vue <template> <section
VUE回到顶部组件，使用requestAnimationFrame
从入门到进错门
12-14 1万+
这篇文章是18年就写的了，那时候element-ui还没有回到顶部组件，我就弄了一个，现在官网已经有了。想直接使用的话可以使用官网上的，但是官网的是使用setInterval写的，我就顺便改一下这篇文章，使用requestAnimationFrame弄一个
实现表格无缝滚动的JavaScript方法
为了保证滚动的流畅性，可能需要使用requestAnimationFrame代替定时器，或是在滚动时避免DOM操作过多，减少重绘和回流的次数。此外，如果使用CSS动画，可以将动画的`transform`属性放在GPU上进行计算，进一步优化...
【JavaScript新闻列表滚动实践】：5步打造流畅滚动效果并优化性能
![JS实现的新闻列表自动滚动效果示例]...随后，进阶内容着重于流畅滚动效果的实现，例如利用requestAnimationFrame和惯性滚动动画的编写。此外，文章还详细探讨了性能优化的策略，包括JavaScript和CSS的最佳实践，减
scroll-to, 使用requestAnimationFrame和Tween组件平滑窗口滚动.zip
09-18
scroll-to, 使用requestAnimationFrame和Tween组件平滑窗口滚动 滚动到平滑窗口滚动到requestAnimationFrame和 Tween位置。安装$ component install component/scroll-to API scrollTo ( x，y，[opt
深入理解requestAnimationFrame的动画循环
09-01
先给大家介绍了什么是requestAnimationFrame，而后才深入讲述关于requestAnimationFrame的动画循环，文章介绍的非常详细，相信对大家学习requestAnimationFrame具有一定的参考借鉴价值，有需要的朋友下面来一起看看吧。
window.requestAnimationFrame讲解
热门推荐
EmotionComputer
08-12 1万+
为什么要说它，源于看到的一道面试题：问题是用js实现一个无限循环的动画。 首先想到的是定时器 <!doctype html> <html lang="en"> <head> <title>Document</title> <style> #e{ width: 100px; height: 100px; background: red;
requestAnimationFrame实现动效优化
月下lk山人的博客
03-13 232
使用setTimeout/setInterval做动效改变时，过程中的刷新频率会影响最终效果，可以使用requestAnimationFrame来优化动效。
实现el-table表单自动滚动
weixin_57889610的博客
12-12 2485
然后设置计时器，并且设置鼠标移入移出事件 并且设置定时器进行数据滚动。首先 设置ref="tableRef" 获取当前的dom元素。效果是表格数据自动滚动，鼠标移入暂停滚动 移出滚动继续。
requestAnimationFrame，读懂这篇文章就够了
知之为知之，不知为不知
05-03 2178
requestAnimationFrame 请求动画帧； 它是一个浏览器的宏任务； requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
【JS】控制requestAnimationFrame执行速度
此人太懒，没有任何简介
04-03 1369
【代码】【JS】控制requestAnimationFrame执行速度。
实现无限滚动表格：用 JavaScript 让数据加载更流畅
最新发布
britlee的博客
05-02 340
通过上述步骤，我们成功实现了一个无限滚动的表格。用户在滚动到表格底部时，会自动加载更多数据，而无需手动翻页。这种方式不仅提升了用户体验，还优化了数据加载的效率。无限滚动表格适用于数据量较大的场景，如商品列表、文章列表、用户列表等。你可以根据实际需求对代码进行扩展，例如添加数据加载失败的提示、支持动态数据源等。希望这篇文章对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值