html 多个div滑动特效,如何实现多个div同时滚动（3个以上）

问题描述

有5个宽度相同的div纵向排列，都会有内容横向溢出。想要实现不论在某一div进行拖动，都能使得其他div能同步滚动。

尝试以及问题

有尝试过如下方法将div1的scrollLeft值与div0的scrollLeft绑定起来，依次绑定，div2和div1,div3和div2...最后将div4和div0的scrollLeft彼此绑定，初看是木有问题能够实现同步横向滚动，但是滚动速度过快就会出现卡顿，内容抖动的情况，自己总结了一下原因是因为每个div会循环刷新彼此的scrollLeft值

相关代码

无标题文档

111111111111111111111111111111111111111111111111111111dsdsdsddadasd23232323232
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2

1234564d65sds5dad起嗯无群二wq9e8eqw89e789we89qwe98wq74e9q8we89wq98qwe98qe98qw而且去问问去

3
3
3
3
3
3
3
3
3
3

预期

五个div能够很顺滑的同步横向滚动

在度娘上找到一个说是根据鼠标的坐标获取鼠标哪一个div范围内，然后将该div的onscroll事件作为主事件去响应，然而这又有了一个新的问题就是，我这五个div是在一个大的div#parent里，该div#parent的样式属性overflow：auto，所以这样就加大了上述方法的难度。。。

诸位大侠有什么好的方法么orz

追答

感谢一楼的提醒，也是自己魔怔了，现整理示例代码如下：

纵向left-parent 跟随 right-parent滚动，横向right-parent自行横向滚动，此类效果可以用作类似于表格冻结表格首列的效果

无标题文档

.container {

display: flex;

justify-content: flex-start;

height: 600px;

overflow-y: scroll

}

.right-parent {

width: 400px;

overflow-x: scroll;

/* z-index: 999; */

}

.left-parent {

width: 200px;

overflow: hidden;

border-right: 2px solid #eeeeee

}

.son {

width: 800px;

height:200px;

}

.sub {

width: 200px;

height:200px;

}

123123123123123123

2342342342342342342

344343434343434343434

34343234234234234234

55555555555555555555

123123123123123123

2342342342342342342

344343434343434343434

34343234234234234234

55555555555555555555