title: scrolling inside a timeline that is made with html & css
body: <p>I am working on a web project where I have to draw a timeline with rows and information (comparable with a <a href="http://dlhsoft.com/GanttChartLibrary/2.0/Documentation/Screenshots/GanttChartView.png" rel="nofollow noreferrer">Gantt chart</a>). Basically the following is important:</p>
  
  <ul>
  <li>The user can scroll in time (to the left or right).</li>
  <li>The timeline can be scrolled vertically (scrolling through the rows).</li>
  <li>The name of the row is always visible on the row itself.</li>
  </ul>
  
  <p>To clear things op I've created the following <em>masterpiece art</em>:
  <img src="https://i.stack.imgur.com/yg9n1.png" alt="timeline"></p>
  
  <p>We can see the timeline with the rows in red, the name of the row is on the left (orange) and items on the rows are colored blue. So scrolling the timeline to the right will result in something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/CW0Ay.png" alt="timeline scrolled"></p>
  
  <p>The names are still on the same position as we can see and that is exactly the question I have:</p>
  
  <p><strong>What is the best practice of keeping items on the same horizontal position within a container that is horizontally and vertically scrollable?</strong> Of course when vertically scrolling through the rows, the orange blocks should also scroll along.</p>
  
  <h2>But hey! What did you try so far? </h2>
  
  <p>I tried a couple of things but could not find the perfect solution:</p>
  
  <h3> 1) Changing the left property </h3>
  
  <p>I tried changing the css <code>left</code> property of the orange blocks with javascript while horizontally moving (changing the position with <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" rel="nofollow noreferrer">Translate()</a> did not change much). This works well on chrome but on IE (still don't understand why people use it) it is really slow and the position update is clearly visible. If you take the scroll bar and start scrolling like crazy, you can see the orange boxes flying from left to right. Which brought me to the following idea:</p>
  
  <h3> 2) YOU! get out!</h3>
  
  <p>I made a separate container element for the orange boxes and put it outside of the timeline, gave it an absolute position and placed it on top of the timeline so it stays there no matter if the user is scrolling the timeline. Results: No difference in appearance and scrolling to the left and right works perfect because I don't have to set the left position of the orange boxes. <strong>BUT...</strong> This solution may work for scrolling horizontally, but when scrolling vertically, the orange boxes have no clue about the vertical position of the timeline, so disadvantages of this solution are:</p>
  
  <ul>
  <li>The vertical scroll position of the orange boxes has to be set with javascript.</li>
  <li>Scrolling vertically is a bit laggy on IE (but smoother and less annoying than first solution).</li>
  <li>(minor) The height of both containers has to be the same, which means setting the height (when needed) has to be done twice.</li>
  </ul>
  
  <p>I would appreciate your help!</p>