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>```
相关推荐
DARLING Zero two♡17 分钟前
关于我、重生到500年前凭借C语言改变世界科技vlog.16——万字详解指针概念及技巧
c语言·开发语言·科技
Gu Gu Study19 分钟前
【用Java学习数据结构系列】泛型上界与通配符上界
java·开发语言
栈老师不回家40 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
芊寻(嵌入式)41 分钟前
C转C++学习笔记--基础知识摘录总结
开发语言·c++·笔记·学习
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
有梦想的咸鱼_1 小时前
go实现并发安全hashtable 拉链法
开发语言·golang·哈希算法
海阔天空_20131 小时前
Python pyautogui库:自动化操作的强大工具
运维·开发语言·python·青少年编程·自动化
天下皆白_唯我独黑1 小时前
php 使用qrcode制作二维码图片
开发语言·php
夜雨翦春韭1 小时前
Java中的动态代理
java·开发语言·aop·动态代理