div后面的网格线没有使用绝对定位

Question

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

1. 坐在可滚动的div（{{1}}）
内
2. 具有互动式点击并拖动区域
3. 交互区域后面有25条单像素线网格
4. 垂直拉伸以适合任何选定的高度



（此示例图像错误地显示网格线与左侧的时间标记未完全对齐，因此只是假装他们这样做）

随附的代码：http://codepen.io/t3db0t/pen/VKROka（非交互式）

以前我把这一切都用于绝对定位，但是这会对滚动造成严重破坏（因为你不能使用鼠标滚轮来滚动div，这是一个要求）。所以除了网格线外，我的所有工作都没有绝对定位。

我可以做一个重复的图案或图像，但是它不能正确地垂直拉伸。行数总是相同的。有什么想法吗？

Answer 1

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

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

请记住，这将contianer划分为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

＆＃13;

＆＃13;

.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%);
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我解决了这个问题。父级没有正确定位，它导致孩子以某种不合需要的方式拦截滚动，所以我现在使用绝对定位的分层div来显示网格线。 Harun的回答很有趣，但我无法按照要求完全工作。