实现两个table一起滚动的效果-编程知识

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

效果

在这里插入图片描述

代码

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>