javascript - div 后面的网格线不使用绝对定位

Question

我正在尝试构建一个时间选择器:

1. 位于可滚动的 div 内(overflow-y:scroll)
2. 有一个交互式的点击和拖动区域
3. 在交互区域后面有一个由 25 条单像素线组成的网格
4. 垂直拉伸(stretch)以适应任何选定的高度

(此示例图像错误地显示了网格线未与左侧的时间标记完全对齐，所以假装它们对齐)

随附的代码笔:http://codepen.io/t3db0t/pen/VKROka (非交互式)

以前，我使用绝对定位来处理这一切，但这对滚动造成了严重破坏(例如，您不能使用鼠标滚轮来滚动 div，这是一项要求)。因此，除了网格线之外，我的所有东西都可以在没有绝对定位的情况下工作。

我可以做一个重复的图案或图像，但它不会正确地垂直拉伸(stretch)。行数将始终相同。有什么想法吗？

Answer 1

您可以使用重复的线性渐变来使用它。诀窍是使用百分比来划分您想要的行数。如果你想要总共 25 个部分，那么你最后一个渐变停止点应该是 4% (4% x 25 = 100%)。您可以通过将颜色停止放在彼此的顶部来将您的线定位在渐变内的任何位置。

线条不会是一个像素，而是整个宽度的百分比。有一些跨浏览器渲染问题会导致线条的宽度发生变化。然而，在适当的情况下，这可能是一个很好的解决方案。

请记住，这会将容器分成 25 个部分……而不是 26 个部分除以 25 行。如果你希望你的梯度必须是 3.85% (100/26)

我的代码示例将线放在重复渐变的开头，下面的链接将它放在中间

http://www.virtuosoft.eu/tools/css-gradient-generator/?t=linear&d=angle&r=on&a=0&sp=00000000_0_%25__00000000_1.7_%25__000000_1.7_%25__000000_2.3_%25__00000000_2.3_%25__00000000_4_%25

.gradient {
    background-image: -webkit-repeating-linear-gradient(90deg,black 0%,black 0.5%,transparent 0.5%,transparent 4%);
    /* IE10+ */
    background-image: repeating-linear-gradient(0deg,black 0%,black 0.5%,transparent 0.5%,transparent 4%);
    background-image: -ms-repeating-linear-gradient(90deg,black 0%,black 0.5%,transparent 0.5%,transparent 4%);
}