div后面的網格線，無需使用絕對定位

Question

我正在嘗試建立一個時間選擇器：

1. 坐在可滾動的div中（ overflow-y:scroll ）
2. 具有交互式的單擊和拖動區域
3. 在交互區域后面有25條單像素線的網格
4. 垂直拉伸以適合任何選定的高度

（此示例圖像錯誤地顯示了與左側時間標記不完全對齊的網格線，因此假裝它們確實正確）

隨附的Codepen： http ：//codepen.io/t3db0t/pen/VKROka（非交互式）

以前，我使用絕對定位進行所有操作，但是這給滾動帶來了嚴重破壞（例如，您不能使用鼠標滾輪來滾動div，這是必需的）。 因此，除了網格線外，所有工作都無需絕對定位。

我可以做一個重復的圖案或圖像，但那樣不會正確地垂直拉伸。 行數將始終相同。 有任何想法嗎？

Answer 1

您可以使用重復的線性漸變來使用它。 訣竅是使用分成所需行數的百分比。 如果您總共需要25個切片，則您的最后一個漸變色標應為4％（4％x 25 = 100％）。 您可以通過將色標放置在彼此的頂部來將線條定位在漸變內的任何位置。

該行將不是一個像素，而是整個寬度的百分比。 存在一些跨瀏覽器渲染問題，這些問題可能導致線寬變化。 但是，在適當的情況下，這可能是一個很好的解決方案。

請記住，這會將容器分為25個部分，而不是由25行划分的26個部分。 如果您希望漸變必須為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%); } 

Answer 2

我解決了這個問題。 父級的位置不正確，這導致子級以某種不希望的方式攔截滾動，因此我現在使用絕對位置的分層div來顯示網格線。 Harun的回答很有趣，但是我無法使其完全按要求工作。