另一个滚动时动态滚动另一个元素

Question

我有一个奇怪的情况。看看这个图片：

我有一个沿顶部的统治者。当我垂直滚动内容时，我不希望它滚动，所以我把它放在滚动容器的外面。但现在它也不水平滚动。当内容滚动时，我需要与内容容器的滚动条同步水平滚动。

我该如何做到这一点？

Answer 1

这个普通的JavaScript函数拿起#content的.scrollLeft值，也再现了#ruler的.scrollLeft

jsfiddle

document.getElementById("content").addEventListener("scroll", myFunction); 
 

 
function myFunction() { 
 

 
var elmnt = document.getElementById("content"); 
 
var elmnt2 = document.getElementById("ruler"); 
 

 
elmnt2.scrollLeft = elmnt.scrollLeft; 
 

 
}

#ruler { 
 
    background: skyblue; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
#content { 
 
    height: 100px; 
 
    overflow: scroll; 
 
    background: plum; 
 
}

<div id=ruler>1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5..6..7..8..9..0..1..2..3..4..5</div> 
 
<div id=content> 
 
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 
 
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 
 
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 
 
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</p> 
 
</div>