Html 如何在卷轴上画垂直线？

我正在建立一个网站，需要用线条“连接”每个部分，这些线条应该在你向下滚动页面时画出来（如图所示）

var path=document.querySelectorAll（'path'），
百分比卷轴；
$（路径）。每个（函数（）{
this.style.strokeDasharray=this.getTotalLength（）；
this.style.strokedashcoffset=this.getTotalLength（）；
});
window.onscroll=函数（）{
百分比滚动=window.pageYOffset/（document.body.offsetHeight-window.innerHeight）
$（路径）。每个（函数（）{
this.style.strokedashcoffset=Math.floor（this.getTotalLength（）*（1-percentScroll））；
});
};
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:300）；
*,
*：之前，
*：之后{
框大小：边框框；
}
身体{
背景：白烟；
字体大小：16px；
字体系列：开放式SAN；
高度：2000px；
}
h1{
背景：矢车菊蓝；
字号：3em；
颜色：白烟；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：10vh；
}
svg{
位置：固定；
}
路径{
填充：无；
笔画：淡紫红色；
笔画宽度：3；
}

卷轴上的SVG线条绘制
主要思想是：连接器需要一个svg元素。我使用的是
viewBox=“0 100 100”
和
preserveSpectratio=“none”
的视图框，这样我就可以根据需要拉伸svg

为了避免连接器因拉伸而变形，我使用了矢量效果：非缩放笔划

这种动画是这样完成的：路径有一个笔划-虚线阵列，其中虚线和间隙与路径的总长度相同。此外，笔划dashoffset等于路径的总长度。这意味着在一开始你会看到“差距”。移动嘴轮时，减少笔划偏移，开始看到线条

我希望这就是你要问的


const svg=document.querySelector（“svg”）；
设l=188//路径的总长度
var dasharray=l；
var dashoffset=l；
//设置路径的笔划dasharray和笔划dashoffset
svg.style.strokeDasharray=dasharray；
svg.style.strokeDashoffset=dashoffset；
wrap.addEventListener（“轮子”，
（e） =>{
e、 预防默认值（）；
//e、 三角洲是垂直运动
如果（dashoffset>0&&e.deltaY>0 | |
dashoffsetl）dashoffset=l；
//重置路径的笔划dasharray和笔划dashoffset
svg.style.strokeDashoffset=dashoffset；
}，假）
文章，
部分{
宽度：100%；
填料：2米；
文本对齐：居中；
边框：1px实心；
边际：0.5em-0；
框大小：边框框；
背景#d9d9d9；
}
#文章{
显示器：flex；
保证金：0；
宽度：100%；
填充：0；
证明内容：之间的空间；
}
文章{
flex:0150px；
保证金：0；
}
#包裹{
保证金：0自动；
宽度：365px；
位置：相对位置；
}
svg{
位置：绝对位置；
z指数：-1；
宽度：100%；
身高：100%；
矢量效果：非缩放笔划；
}
路径{
填充：无；
笔画：黑色；
}

第一节
第二节
第1条第2款
这正是我想要的！我还没有在我的代码中尝试过，但我想问，我可以指定行的起始位置和结束位置吗？问题是我有不同的部分，所以我的想法是在滚动到该部分并继续向下时画一条线，不确定我是否清楚，你有什么想法在一个角度组件上实现这一点吗？对不起，我没有。但是你可以把它当作一个不同的问题来问，没关系，不过，非常感谢，它真的帮助我理解了它背后的逻辑，我会再练习一下。我注意到这会禁用我的鼠标滚轮滚动，知道为什么吗？