JS动态计算自动滚动距离

张清悠

已于 2023-09-13 10:21:20 修改

阅读量393

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-09-04 11:20:22 首次发布

本文链接：https://blog.csdn.net/weixin_48193717/article/details/132665319

版权

先上效果

在这里插入图片描述

分析

在HTML部分，通过Vue的指令 v-for 循环生成了20个表格项，每个表格项的样式根据其奇偶性设置为不同的类名。
在Vue实例中，定义了一个名为 startAnimation 的方法，用于计算并设置动画效果。
startAnimation 方法首先获取表格容器的高度和所有表格项的高度，然后根据高度差判断是否需要进行滚动动画。
如果表格内容高度大于容器高度，计算需要移动的高度，并设置每个表格项的初始位置和动画效果。
点击按钮时触发 clickad 方法，调用 startAnimation 方法开始滚动动画。

原理

通过获取表格容器的高度和表格项的高度，判断是否需要进行滚动动画。
如果需要滚动动画，根据内容高度和容器高度计算动画持续时间，并设置每个表格项的初始位置和动画效果。
动画效果通过CSS的 transform 属性和 @keyframes 关键帧动画来实现

使用场景

此代码适用于需要展示大量数据的表格，并且希望以滚动动画的方式展示内容。
可以用于网页中的数据列表、新闻滚动、聊天记录等场景

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

<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>```

注意事项：

在使用Vue的 v-for 指令时，要确保每个列表项都有唯一的 key 属性，以便Vue能够正确地跟踪和更新元素。
如果表格内容高度小于容器高度，则不需要进行滚动动画，可以根据实际情况进行判断和处理

总结：

这段代码通过Vue实现了一个滚动表格动画效果，根据表格内容的高度和容器的高度，判断是否需要进行滚动动画，并通过CSS的 transform 属性和 @keyframes 关键帧动画实现滚动效果。此代码适用于需要展示大量数据的表格，并希望以滚动动画的方式展示内容。在使用时要注意为列表项设置唯一的 key 属性，以确保Vue能够正确地跟踪和更新元素。