title: Appending a Vertical Scroll to a Horizontal Scroll Bar
body: <p>I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / functioning as I need it to be.</p>
  
  <p>What I'm trying to do is have a horizontally scrolling div (with scrollbar), with a vertically scrolling div nested within it. Ideally the single horizontal scrollbar would scroll, and after a certain point--vertically scroll the "go-up" div next to it.</p>
  
  <p>Here's an example diagram for those who need to visualize: 
  <img src="https://i.imgur.com/Av8Ug56.png" alt="diagram" title="example diagram">
  I think I have a solution that could work:</p>
  
  <p>Basically I'm thinking that the horizontal "scene" could have overflow that equals the height of the "go-up" div. And after the horizontal width of the "scene" passes...you can, onScroll, shift the "go-up" container right using (ScrollLeft) and up using (ScrollTop).</p>
  
  <p>Basically giving you the illusion of controlling it's vertical scroll with a horizontal scrollbar.</p>
  
  <p>Check out the code here: <a href="http://jsfiddle.net/jPzqj/1/" rel="nofollow noreferrer">http://jsfiddle.net/jPzqj/1/</a></p>
  
  <p>I know how to pass a function at the end of the "scene"...currently I'm using:</p>
  
  <pre><code>$('#main').scroll(function(e)
      {
          if($(this).scrollLeft()&gt;1430)
          {
  
          }
  });
  </code></pre>
  
  <p>My only issue is I'm not quite sure how to approach the math that would allow me to shift the go-up container. How do I pass in the "scene" divs scroll value into the ScrollLeft and ScrollTop values of "go-up"...</p>
  
  <p>Could anyone give me any advice on this at all?</p>
  
  <p>Thanks.</p>