css动画实现table自动滚动

二七狂人

已于 2024-12-19 11:47:08 修改

阅读量335

点赞数 3

分类专栏： css 文章标签： css 前端 css3 html5

于 2024-11-20 17:23:26 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43066287/article/details/143920398

版权

更新：增加了JS高度计算，自动适应滚动高度与速度。

<style>
table {
     
    position: relative;
    z-index: 1;
}

thead {
     
    position: relative;
    z-index: 1;
}
/* spin为自定义函数名 */
@keyframes spin {
     
    0% {
     
        position: relative;
        top: 0;
    }
    100% {
     
        position: relative;
        top: var(--roll-top, 0);
    }
}

#tableView {
     
    position: relative;
}
</style>
<div id="tableBox" style="height: 100vh;overflow-y: hidden