vue+el-tabel+requestAnimationFrame自动滚动到最新数据
效果:
起因:
上头觉得直接插入新数据没有交互感,下令调整表格的动感。开始我还以为是小case,没想到一波三折,从原生tabel表格大体效果实现,被批没有可复用,到结合el-tabel优雅实现效果,主要实现思路是拿取表格实例对象监听元素可视高度与元素垂直滚动高度之和,来和元素总高度做对比。
学习啦:
scroll
家族包含了一些用于控制和管理滚动的属性和事件,应用于动态内容加载、滚动动画、滚动监听等场景。
scroll家族核心属性:
scrollTop:用于获取或设置元素的垂直滚动位置,以像素为单位
scrollLeft:获取或设置元素的水平滚动位置,以像素为单位
scrollHeight:表示元素内容的总高度,包括当前不可见的区域(即被垂直滚动条遮挡的部分)
scrollWidth:表示元素内容的总宽度,包括当前不可见的区域(即被水平滚动条遮挡的部分)
clientHeight:表示元素的可视区域高度,不包括滚动条
clientWidth:表示元素的可视区域宽度,不包括滚动条
offsetHeight 和offsetWidth
:
返回元素的高度和宽度,包括内边距和边框(但不包括滚动条和外边距)
平滑返回顶部案例:
运行效果:
代码片段:
<template>
<div class="boss" ref="Boss">
<div clas
原文地址:https://blog.csdn.net/m0_72030584/article/details/143524991
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!