How can I scroll div based on a horizontal scrollbar in another div in jQuery?

Question

I have a <div id="topDiv">Some content</div> which may be extending due to various reason beyond the browser's edge on the right side. Below that div I have another <div id=bottomDiv">Some content</div> that actually generates a horizontal scroll bar if its content goes beyond the browser's edge on the right side.

I'm looking for a jQuery solution that would allow me to scroll/move the topDiv when the user scrolls the bottomDiv using its scroll bar. So that both topDiv & bottomDiv content is always aligned.

Answer 1

Sort of a repeat of this question: How do I synchronize the scroll position of two divs?

But this answer would involve scrollLeft() instead of scrollTop().

$('#bottom').scroll(function () {
  $('#top').scrollTop($(this).scrollLeft());
});

Jsfiddle: http://jsfiddle.net/wvwLt3s9/

You would have to play around with the syncing of the two to get them to scroll at the rates you want, but this should work.