实现两个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>
相关推荐
zhanshuo14 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang15 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥16 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil17 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录24 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672224 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少29 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
1234Wu44 分钟前
React Native 接入 eCharts
javascript·react native·react.js
abigale033 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle