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

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>