实现两个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>
相关推荐
前端 贾公子4 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐5 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
前端小万8 分钟前
一次紧急的现场性能问题排查
前端·性能优化
excel24 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手24 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360227 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep27 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo29 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒1 小时前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用1 小时前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端