Clever Geek Handbook

Scrolling within a timeline created with html & css

I am working on a web project where I need to draw a timeline with lines and information (comparable to a Gantt chart ). Basically the following is important:

  • The user can scroll in time (left or right).
  • The timeline can be scrolled vertically (scroll rows).
  • The string name is always displayed on the string itself.

To clean things up, I created the following masterpiece art: timeline

We can see the timeline with red bars, the row title on the left (orange), and the items in the rows in blue. So, scrolling the timeline to the right will result in something like this:

timeline scrolled

The names are still in the same position as us, and this is exactly the question I have:

What's the best practice for keeping items in the same horizontal position in a horizontal and vertical scrolling container? Of course, when vertically scrolling the rows, the orange boxes must also scroll forward.

But hey! What have you tried so far?

I tried a couple of things but couldn't find the perfect solution:

1) Change property left

I tried to change the css property of left

orange blocks with javascript when moving horizontally (changing position with Translate () doesn't change much). This works well on chrome, but in IE (still don't understand why people use it) it is very slow and the position update is clearly visible. If you take the scroll bar and start scrolling like crazy, you can see orange boxes flying from left to right. This led me to the following idea:

2) YOU! come out!

I made a separate container for the orange boxes and took it out of the timeline, gave it an absolute position and placed it on top of the timeline so that it stays there no matter if the user scrolls the timeline. Results. No difference in appearance and scrolling left and right stops because I don't need to set the left position of the orange boxes. BUT ... This solution may work for scrolling horizontally, but when scrolling vertically, the orange boxes have no idea about the vertical position of the timeline, so the disadvantages of this solution are as follows:

  • The vertical scroll position of the orange boxes must be set using javascript.
  • Vertical scrolling lags slightly behind IE (but smoother and less annoying than the first solution).
  • (minor) The height of both containers must be the same, which means that the height setting (if necessary) must be done twice.

I would appreciate your help!

+3


source to share


1 answer


I don't think this is exactly what you wanted, but I thought I would post it anyway, as it is not a bit different from your solution. 2 and may have some advantages.

http://codepen.io/anon/pen/qsfGJ



<div class="container">
<div class="right-column">
    <div class="left-column">
        <div class="label">Label 1</div>
        <div class="label">Label 2</div>
        <div class="label">Label 3</div>
        <div class="label">Label 4</div>
        <div class="label">Label 5</div>
        <div class="label">Label 6</div>
        <div class="label">Label 7</div>
        <div class="label">Label 8</div>
        <div class="label">Label 9</div>
        <div class="label">Label 10</div>
        <div class="label">Label 11</div>
        <div class="label">Label 12</div>
        <div class="label">Label 13</div>
        <div class="label">Label 14</div>
    </div>
    <div class="row">
        <div class="row-label">Row 1</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 2</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 3</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 4</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 5</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 6</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 7</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 8</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 9</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 10</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 11</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 12</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 13</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
    <div class="row">
        <div class="row-label">Row 14</div>
        <div class="event"></div>
        <div class="event"></div>
    </div>
</div>
</div>
+3


source






More articles:


All Articles