实现两个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>
相关推荐
IT_陈寒2 分钟前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿4 分钟前
react 实现插槽slot功能
前端
stoneship27 分钟前
Web项目减少资源加载失败白屏问题
前端
DaMu1 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员1 小时前
一文读懂Font文件
前端
Asort1 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer1 小时前
什么是 React 中的远程组件?
前端·react.js
真夜1 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js