Dynamically scroll another element when another scrolls

Question

I have an odd situation. Look at this image:

I have that ruler along the top. I don't want it to scroll off when I scroll the content vertically, so I put it outside the scrolling container. But now it doesn't scroll horizontally either. I need to scroll that horizontally in sync with the content container's scrollbar when the content is scrolled.

How can I accomplish this?

Answer 1

This plain javascript function picks up the .scrollLeft value of the #content and reproduces it on the #ruler's .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>