在使用html＆amp ;;制作的时间轴内滚动CSS

时间：2014-08-06 14:36:38

标签： javascript jquery html css scroll

我正在开展一个网络项目，我必须使用行和信息绘制时间轴（与Gantt chart相比）。基本上以下几点很重要：

  • 用户可以及时滚动（向左或向右）。
  • 时间轴可以垂直滚动（滚动行）。
  • 行的名称始终显示在行本身上。

为了清除事情，我创建了以下杰作艺术： timeline

我们可以看到时间轴，其中行为红色，行的名称位于左侧（橙色），行上的项目为蓝色。因此，向右滚动时间轴将导致如下所示：

timeline scrolled

这些名字仍然处于我们可以看到的相同位置，这正是我的问题：

将项目保持在水平和垂直可滚动的容器内的同一水平位置的最佳做法是什么？当然，当垂直滚动行时，橙色块也应该滚动。

<嘿>但是嘿！你到目前为止做了什么？

我尝试了几件事，但找不到完美的解决方案：

1）更改左侧属性

我尝试使用javascript更改橙色块的css left属性，同时水平移动（使用Translate()更改位置没有太大变化）。这在Chrome上运行良好，但在IE上（仍然不理解为什么人们使用它）它非常慢并且位置更新清晰可见。如果您使用滚动条并开始像疯了一样滚动，您可以看到橙色框从左向右飞行。这让我想到了以下想法：

2）你！滚出去！

我为橙色框创建了一个单独的容器元素，并将其放在时间轴之外，给它一个绝对位置并将其放在时间轴的顶部，这样无论用户是否滚动时间轴，它都会保留在那里。结果：外观和向左和向右滚动没有区别，因为我不必设置橙色框的左侧位置。 但是...... 此解决方案可能适用于水平滚动，但是当垂直滚动时，橙色框没有关于时间轴垂直位置的线索，因此此解决方案的缺点是：

  • 橙色框的垂直滚动位置必须使用javascript设置。
  • 垂直滚动对IE有点滞后（但比第一个解决方案更平滑，更烦人）。
  • （次要）两个容器的高度必须相同，这意味着设置高度（需要时）必须进行两次。

感谢您的帮助！

2 个答案:

答案 0 :(得分：3)

我认为这不是你想要的，但我认为无论如何我都会发布它，因为它与你的解决方案没有什么不同。 2可能有一些优势。

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>

答案 1 :(得分：1)

可滚动的水平时间轴-CSS3

我最近正在研究类似的东西-偶然发现了这个时代，这个问题（IE）“离开了障碍”，但仍然发现这个任务相对具有挑战性。这是我使用

的解决方案

position: sticky;

示例-带有奖金标尺和金条：

.TL {
  font: 14px/1.4 sans-serif;
  position: relative;
  height: 100px; /* set as desired */
  overflow: scroll;
  background: #ddd;
}
.TL-scroll {
  width: max-content;
  min-width: 100%;
}
.TL-row {
  display: flex;
  flex-flow: row nowrap;
  border-bottom: 1px solid #aaa;
  flex: none;
  min-width: 100%;
}
.TL-row--top {
  background: #eee;
  position: sticky;
  top: 0;
  z-index: 3;
}
.TL-row--top .TL-rowCells {
  background-image:
    repeating-linear-gradient(90deg, #aaa, #aaa 1px, transparent 1px, transparent 100px),
    repeating-linear-gradient(90deg, #aaa, #aaa 1px, transparent 1px, transparent 10px);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 6px, 0 14px;
}
.TL-rowName {
  position: sticky;
  flex: 0 0 120px;
  z-index: 2;
  left: 0;
  width: 200px;
  padding: 10px;
  background: #eee;
}
.TL-rowRuler {
  z-index: 1;
  width: 1px;
  background: #f0a;
  /* IMPORTANT use translateX to move the rulers! */
  transform: translateX(161px); /* This will most probably be handled by JS */
}
.TL-rowCells {
  position: relative;
  display: flex;
  width: 100%;
  flex-flow: row nowrap;
}
.TL-cell {
  padding: 10px 0;
  background: #0cf;
  border-right: 1px solid #eee;
  text-align: center;
}
<div class="TL">

  <div class="TL-scroll">

    <div class="TL-row TL-row--top">
      <div class="TL-rowName"></div>
      <div class="TL-rowRuler"></div>
      <div class="TL-rowCells"></div>
    </div>

    <div class="TL-row">
      <div class="TL-rowName">1 Row name</div>
      <div class="TL-rowRuler"></div>
      <div class="TL-rowCells">
        <div class="TL-cell" style="width:50px; margin-left:0px;">50</div>
        <div class="TL-cell" style="width:120px; margin-left:40px;">120</div>
        <div class="TL-cell" style="width:190px; margin-left:400px;">190</div>
      </div>
    </div>

    <div class="TL-row">
      <div class="TL-rowName">Row 2</div>
      <div class="TL-rowRuler"></div>
      <div class="TL-rowCells">
        <div class="TL-cell" style="width:300px; margin-left:20px;">300</div>
        <div class="TL-cell" style="width:20px; margin-left:100px;">20</div>
        <div class="TL-cell" style="width:60px; margin-left:5px;">60</div>
        <div class="TL-cell" style="width:100px; margin-left:40px;">100</div>
        <div class="TL-cell" style="width:80px; margin-left:0px;">80</div>
        <div class="TL-cell" style="width:30px; margin-left:50px;">30</div>
        <div class="TL-cell" style="width:60px; margin-left:0px;">60</div>
      </div>
    </div>

    <div class="TL-row">
      <div class="TL-rowName">Row 3 name</div>
      <div class="TL-rowRuler"></div>
      <div class="TL-rowCells">
        <div class="TL-cell" style="width:200px; margin-left:300px;">200</div>
        <div class="TL-cell" style="width:40px; margin-left:20px;">40</div>
      </div>
    </div>

  </div>

</div>

相关问题
最新问题