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 acplish this?

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 acplish this?

• javascript
• jquery
• html
• css
• scroll

• 1 Please show your ("minimal reproducible example") HTML, CSS and JavaScript in order that we can reproduce your problem and so provide useful answers, rather than guesses apropos of nothing. It might also be worth reading through the "How to Ask" guidance, to refresh yourself on what we expect of a question here on Stack Overflow. – David Thomas Commented Apr 8, 2016 at 17:57

1 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>