实现两个table一起滚动的效果

最新推荐文章于 2024-04-28 15:42:08 发布

__十七

最新推荐文章于 2024-04-28 15:42:08 发布

阅读量514

点赞数

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

本文链接：https://blog.csdn.net/wlijun_0808/article/details/132286957

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

代码

css相关

重点是.head-box .body-box-right .body-box-left 三个类的设置

.box {
            display: flex;
            justify-content: flex-start;
        }

        table {
            width: 500px;
        }

        tr,
        th {
            display: flex;
            justify-content: space-around;
            align-content: space-around;
            height: 50px;
        }

        td {
            width: 80px;
            text-align: center;
            line-height: 50px;
        }

        .head-box {
            color: aliceblue;
            background-color: blueviolet;
        }

        .body-box-right,
        .body-box-left {
            display: block;
            height: 300px;
            overflow-y: auto;
            /* -webkit-overflow-scrolling: touch; */
        }

        .body-box-left {
            overflow: hidden;
        }


<div class="box">
        <table border="1">
            <thead class="head-box">
                <tr>
                    <th>
                        <div>姓名</div>
                    </th>
                    <th>年级</th>
                    <th>性别</th>
                    <th>家庭住址</th>
                    <th>联系方式</th>
                </tr>
            </thead>
            <tbody class="body-box-left">
                <tr>
                    <td>11</td>
                    <td>22</td>
                    <td>33</td>
                    <td>44</td>
                    <td>55</td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>22</td>
                    <td>33</td>
                    <td>44</td>
                    <td>55</td>
                </tr>
            </tbody>
        </table>
        <div class="table-box">
            <table border="1">
                <thead class="head-box">
                    <tr>
                        <th>
                            <div>姓名</div>
                        </th>
                        <th>年级</th>
                        <th>性别</th>
                        <th>家庭住址</th>
                        <th>联系方式</th>
                    </tr>
                </thead>
                <tbody class="body-box-right">
                    <tr>
                        <td>11</td>
                        <td>22</td>
                        <td>33</td>
                        <td>44</td>
                        <td>55</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td>22</td>
                        <td>33</td>
                        <td>44</td>
                        <td>55</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td>22</td>
                        <td>33</td>
                        <td>44</td>
                        <td>55</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

js相关

<script>
        let leftBox = document.querySelector('.body-box-left')
        let rightBox = document.querySelector('.body-box-right')
        console.log(rightBox)
        rightBox.addEventListener('scroll', function () {
            setLeftBox()
        }, 85, {
            loading: true,
            trailing: false
        })

        function setLeftBox() {
            let diff = Number(rightBox.scrollTop)
            leftBox.scrollTop = diff
        }
    </script>