JS动态计算自动滚动距离

先上效果

具体实现代码(如果用到vue项目中的css要取消scoped否则不生效)

javascript 复制代码
在这里插入代码片<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>星空</title>
    <style lang="scss">
        .table-container {
            height: 300px;
            overflow: auto;
            border: 1px solid #08e6e4;
            text-align: center;
            line-height: 108px;
        }

        .on {
            width: 100px;
            height: 100px;
            background-color: #08e6e4;
        }

        .off {
            width: 100px;
            height: 100px;
            background-color: #f21;

        }

        @keyframes scrollTable {
            0% {
                transform: translateY(0);
            }

            100% {
                /* transform: translateY(-2000%); */
            }
        }

        .clickad {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="table-container" ref="tableContainer">
            <div v-for="number in 20" :key="number" class="table-item"
                :class="{ on: number % 2 == 0, off: number % 2 != 0 }">
                <div class="names"> {{number}} </div>
            </div>
        </div>
        <button class="clickad" @click="clickad">点击滚动</button>
    </div>
    </div>
    <!-- cdn引入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.js"></script>
    <script>
        // 初始化
        new Vue({
            el: "#app",
            data() {
                return {
                };
            },
            methods: {
                // 动态计算方法
                startAnimation() {
                    const container = document.querySelector('.table-container');
                    const tableItems = document.querySelectorAll('.table-container .table-item');
                    const containerHeight = container.offsetHeight; // 获取容器的高度
                    let tableHeight = 0;
                    tableItems.forEach((item) => {
                        console.log(item);
                        tableHeight += item.scrollHeight; // 累加每个表格项的高度
                    });
                    if (containerHeight < tableHeight) {
                        const translateYDistance = -(tableHeight - containerHeight); // 计算需要移动的高度
                        tableItems.forEach((item) => {
                            item.style.transform = `translateY(${translateYDistance}px)`; // 设置初始位置
                            console.log(item.style.transform);
                        });
                        const animationDuration = (tableHeight / containerHeight) * 2; // 根据内容高度和容器高度计算动画持续时间
                        tableItems.forEach((item) => {
                            item.style.animation = `scrollTable ${animationDuration}s infinite linear`; // 设置动画
                            console.log(item.style.animation);

                        });
                    }
                },
                // 点击事件
                clickad() {
                    this.startAnimation()
                },
            },
        });
    </script>
</body>

</html>```
相关推荐
wanzhong233344 分钟前
学习triton-第1课 向量加法
开发语言·python·高性能计算
li35741 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
快乐是Happy1 小时前
分享一个非常实用的防止重复提交操作
前端·javascript
可子是我的小猫1 小时前
【JS】模块(二)
javascript
云枫晖1 小时前
JS核心知识-执行上下文
前端·javascript
麦当_1 小时前
TanStack Router File-Based Router Mask 完全指南
前端·javascript·设计模式
珍珠奶茶爱好者1 小时前
vue二次封装ant-design-vue的table,识别columns中的自定义插槽
前端·javascript·vue.js
三千道应用题1 小时前
C#语言入门详解(18)传值、输出、引用、数组、具名、可选参数、扩展方法
开发语言·c#
忧郁的蛋~1 小时前
使用.NET标准库实现多任务并行处理的详细过程
开发语言·c#·.net
dragon_perfect1 小时前
全流程基于Yolov8实现在Label-Studio实现半自动标注,已经把整个流程理清楚,把所有的坑解决。
开发语言·python·yolo·labelstudio