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

效果

代码

css相关

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

javascript 复制代码
.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相关

javascript 复制代码
<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>
相关推荐
abigale0331 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者1 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile1 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639971 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊1 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火1 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码