前端js控制元素移动

news2024/10/5 18:27:25

背景

页面中有多个表格，每个表格中均有一从右到左匀速移动的元素，随着元素移动需要在表格中增减数据，由于使用css3动画无法捕捉元素移动位置，所以这里采用js控制dom的写法

解决办法

最终代码放在文章的最后，各位看官可以跳过这里直接取用。
思路如下，首先我采用了scrollLeft+setInterval进行试验，发现使用scrollLeft只能让内部元素最右侧和外部元素左右侧重合就无法继续滚动了
在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;

        }

        #wrapper {
            cursor: pointer;
            width: 600px;
            height: 200px;
            border: 1px solid pink;
            overflow: hidden;
            display: flex;
            margin: auto;
        }

        #list {
            display: flex;
        }

        #list {
            margin-left: 600px;
        }

        .item {
            width: 200px;
            height: 200px;
            flex-shrink: 0;
            text-align: center;
            line-height: 200px;

        }


        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: yellow;
        }
    </style>
</head>

<body>
    <!-- 外层盒子 -->
    <div id="wrapper">
        <!-- 内部滚动盒子 -->
        <div id="list">
            <div class="item">
                1
            </div>
            <div class="item">
                2
            </div>
            <div class="item">
                3
            </div>
            <div class="item">
                4
            </div>
            <div class="item">
                5
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {
            let speed = 10;
            let tab = document.getElementById("wrapper");
            let tab1 = document.getElementById("list");
            function handleScroll() {
                if (tab1.offsetWidth - tab.scrollLeft <= 0) { clearInterval(timer) }
                else {
                    tab.scrollLeft++;
                }
            }
            let timer = setInterval(handleScroll, speed);
        }
    </script>
</body>

</html>

于是我用translateX代替scrollLeft，发现成功了，内部元素可以从右至左滚动至完全消失
在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;

        }

        #wrapper {
            cursor: pointer;
            width: 600px;
            height: 200px;
            border: 1px solid pink;
            overflow: hidden;
            display: flex;
            margin: auto;
        }

        #list {
            display: flex;
        }

        #list {
            margin-left: 600px;
        }

        .item {
            width: 200px;
            height: 200px;
            flex-shrink: 0;
            text-align: center;
            line-height: 200px;

        }


        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: yellow;
        }
    </style>
</head>

<body>
    <!-- 外层盒子 -->
    <div id="wrapper">
        <!-- 内部滚动盒子 -->
        <div id="list">
            <div class="item">
                1
            </div>
            <div class="item">
                2
            </div>
            <div class="item">
                3
            </div>
            <div class="item">
                4
            </div>
            <div class="item">
                5
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {
            let speed = 10;
            let scrollLength = 0;
            let tab = document.getElementById("wrapper");
            let tab1 = document.getElementById("list");
            function handleScroll() {
                if (tab1.offsetWidth + tab.offsetWidth < scrollLength) {
                    clearInterval(timer)
                }
                else {
                    scrollLength = scrollLength + 1;
                    tab1.style.transform = 'translateX(-' + scrollLength + 'px)';
                }
            }
            let timer = setInterval(handleScroll, speed);
        }
    </script>
</body>

</html>

但是上述方法还有一个问题就是，当前页面有多个滚动元素，即会有多个定时器，由于不断地重绘，导致了页面卡顿，造成了两个相同的滚动元素滚动速度不一致的问题，于是我使用requestAnimationFrame代替setInterval解决了问题
requestAnimationFrame 是一个浏览器提供的 API，用于在下一次重绘之前执行动画。它可以让浏览器在下一次重绘之前调用指定的函数更新动画。这个函数的主要优点是它可以自动匹配显示器的刷新率，从而实现更平滑的动画效果。

最终代码

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;

        }

        #wrapper {
            cursor: pointer;
            width: 600px;
            height: 200px;
            border: 1px solid pink;
            overflow: hidden;
            display: flex;
            margin: auto;
        }

        #list {
            display: flex;
        }

        #list {
            margin-left: 600px;
        }

        .item {
            width: 200px;
            height: 200px;
            flex-shrink: 0;
            text-align: center;
            line-height: 200px;

        }


        .item:nth-child(odd) {
            background: skyblue;
        }

        .item:nth-child(even) {
            background: yellow;
        }
    </style>
</head>

<body>
    <!-- 外层盒子 -->
    <div id="wrapper">
        <!-- 内部滚动盒子 -->
        <div id="list">
            <div class="item">
                1
            </div>
            <div class="item">
                2
            </div>
            <div class="item">
                3
            </div>
            <div class="item">
                4
            </div>
            <div class="item">
                5
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {
            let speed = 10;
            let scrollLength = 0;
            let tab = document.getElementById("wrapper");
            let tab1 = document.getElementById("list");
            function handleScroll() {
                if (tab1.offsetWidth + tab.offsetWidth > scrollLength) {

                    scrollLength = scrollLength + 1;
                    tab1.style.transform = 'translateX(-' + scrollLength + 'px)';
                    requestAnimationFrame(handleScroll);
                }
            }
            requestAnimationFrame(handleScroll);
        }
    </script>
</body>

</html>