js实现两个元素滚动条同步的方法

目标

同步显示两个标签元素的内容，需要同步滚动条。

原理

• 监听元素对象的滚动条事件

var box = document.getElementById('box') // 获取id为box的元素
box.onscroll = function() {
   
    // box的滚动条滚动时触发
}

• 滚动条的属性

// 垂直滚动条
box.scrollHeight // 可滚动的高度
box.clientHeight // 滑块的高度
box.scrollTop // 已纵向滚动的距离
// 水平滚动条
box.scrollWidth // 可滚动的宽度
box.clientWidth // 滑块的宽度
box.scrollLeft // 已横向滚动的距离

思路

监听第一个滚动条，当滚动条滚动时，获取第一个滚动条的位置，然后改变第二个滚动条的位置；

监听第二个滚动条，当滚动条滚动时，获取第二个滚动条的位置，然后改变第一个滚动条的位置。