极客观点
项目管理
HarmonyOS
问题描述
有5个宽度相同的div纵向排列，都会有内容横向溢出。想要实现不论在某一div进行拖动，都能使得其他div能同步滚动。
尝试以及问题
有尝试过如下方法将div1的scrollLeft值与div0的scrollLeft绑定起来，依次绑定，div2和div1,div3和div2...最后将div4和div0的scrollLeft彼此绑定，初看是木有问题能够实现同步横向滚动，但是滚动速度过快就会出现卡顿，内容抖动的情况，自己总结了一下原因是因为每个div会循环刷新彼此的scrollLeft值
相关代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<meta content="max-age=0" http-equiv="Cache-Control">
<meta content="YES" name="apple-touch-fullscreen">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="div1" style="width:200px;height:200px; background: blue; border:1px #ddd solid; overflow:auto;" onscroll="document.getElementById('div2').scrollLeft = this.scrollLeft; document.getElementById('div3').scrollTop = this.scrollTop;">
<div style="width:800px; height:800px;">111111111111111111111111111111111111111111111111111111dsdsdsddadasd23232323232<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/></div>
</div>
<div id="div2" style="width:200px; border:1px #ddd solid;background: red; overflow:scroll;" onscroll="document.getElementById('div3').scrollLeft = this.scrollLeft;">
<div style="width:800px; height:50px;">1234564d65sds5dad起嗯无群二wq9e8eqw89e789we89qwe98wq74e9q8we89wq98qwe98qe98qw而且去问问去</div>
</div>
<div id="div3" style="width:200px;background: yellow; border:1px #ddd solid;height:200px; overflow:scroll;" onscroll="document.getElementById('div1').scrollTop = this.scrollTop;document.getElementById('div1').scrollLeft = this.scrollLeft;" >
<div style="width:800px; height:800px;">3<br/>3<br/>3<br/>3<br/>3<br/>3<br/>3<br/>3<br/>3<br/>3<br/></div>
</div>
</body>
</html>
预期
五个div能够很顺滑的同步横向滚动
在度娘上找到一个说是根据鼠标的坐标获取鼠标哪一个div范围内，然后将该div的onscroll事件作为主事件去响应，然而这又有了一个新的问题就是，我这五个div是在一个大的div#parent里，该div#parent的样式属性overflow：auto，所以这样就加大了上述方法的难度。。。
诸位大侠有什么好的方法么orz
追答
感谢一楼的提醒，也是自己魔怔了，现整理示例代码如下：
纵向left-parent 跟随 right-parent滚动，横向right-parent自行横向滚动，此类效果可以用作类似于表格冻结表格首列的效果
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<meta content="max-age=0" http-equiv="Cache-Control">
<meta content="YES" name="apple-touch-fullscreen">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="div1" style="width:200px;height:200px; background: blue; border:1px #ddd solid; overflow:auto;" onscroll="document.getElementById('div2').scrollLeft = this.scrollLeft; document.getElementById('div3').scrollTop = this.scrollTop;">
<div style="width:800px; height:800px;">111111111111111111111111111111111111111111111111111111dsdsdsddadasd23232323232<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/></div>
</div>
<div id="div2" style="width:200px; border:1px #ddd solid;background: red; overflow:scroll;" onscroll="document.getElementById('div3').scrollLeft = this.scrollLeft;">
<div style="width:800px; height:50px;">1234564d65sds5dad起嗯无群二wq9e8eqw89e789we89qwe98wq74e9q8we89wq98qwe98qe98qw而且去问问去</div>
</div>
<div id="div3" style="width:200px;background: yellow; border:1px #ddd solid;height:200px; overflow:scroll;" onscroll="document.getElementById('div1').scrollTop = this.scrollTop;document.getElementById('div1').scrollLeft = this.scrollLeft;" >
<div style="width:800px; height:800px;">3<br/>3<br/>3<br/>3<br/>3<br/>3<br/>3<br/>3<br/>3<br/>3<br/></div>
</div>
</body>
</html> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<meta content="max-age=0" http-equiv="Cache-Control">
<meta content="YES" name="apple-touch-fullscreen">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
.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;
}
</style>
</head>
<body>
<div class="container">
<div id="div1" class="left-parent" onscroll="document.getElementById('div2').scrollTop = this.scrollTop">
<div class="sub" style="background: red">123123123123123123</div>
<div class="sub" style="background: blue">2342342342342342342</div>
<div class="sub" style="background: green">344343434343434343434</div>
<div class="sub" style="background: yellow">34343234234234234234</div>
<div class="sub" style="background: orange">55555555555555555555</div>
</div>
<div id="div2" class="right-parent" onscroll="document.getElementById('div1').scrollTop = this.scrollTop">
<div class="son" style="background: red">123123123123123123</div>
<div class="son" style="background: blue">2342342342342342342</div>
<div class="son" style="background: green">344343434343434343434</div>
<div class="son" style="background: yellow">34343234234234234234</div>
<div class="son" style="background: orange">55555555555555555555</div>
</div>
</div>
</body>
</html>
html5
既然宽度相同，那说明宽度是固定的，何不让五个 div 撑开共同的父元素，把滚动条交给父元素？