如何在Y轴上显示设定数量的刻度？

<div class="scale-container"></div>

.scale-container {
  position: relative;
  height: 300px; /* 设置容器的高度 */
  width: 20px; /* 设置容器的宽度 */
  background-color: #f1f1f1; /* 设置容器的背景颜色 */
}

.scale-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 10px; /* 设置刻度线的高度 */
  width: 100%; /* 设置刻度线的宽度 */
  background-image: url("刻度线图像的URL"); /* 设置刻度线的背景图像 */
  background-repeat: repeat-y; /* 设置刻度线的重复模式 */
  background-position: center; /* 设置刻度线的位置 */
}

<div id="scale-container"></div>

var container = document.getElementById("scale-container");
var scaleCount = 10; // 设置刻度线的数量

for (var i = 0; i < scaleCount; i++) {
  var scale = document.createElement("div");
  scale.className = "scale";
  scale.style.top = (i * 30) + "px"; // 设置刻度线的位置
  container.appendChild(scale);
}

.scale {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px; /* 设置刻度线的高度 */
  width: 100%; /* 设置刻度线的宽度 */
  background-color: #000; /* 设置刻度线的颜色 */
}