我有一个JavaScript文件,当用户向下滚动页面时,该文件实际上会画一条线。它为第一个SVG画了一条线,但没有为其他SVG(使用相同的类)画一条线。例如,我在text-repeater.php
和 text-block.php
中都有以下代码块:
<svg height="100" width="200">
<line class="line__svg" id="line" x1="0" y1="0" x2="0" y2="200" />
</svg>
这是我的parallax.js
文件:
var scrollLine = document.getElementById("line");
var length = scrollLine.getTotalLength();
// Start position of drawing
scrollLine.style.strokeDasharray = length;
// Find scroll percentage on scroll
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse drawing (when scrolling upwards)
scrollLine.style.strokeDashoffset = length - draw;
}
该线在text-block.php
中绘制,但不在text-repeater.php
中
想法为何?
另外,在相关说明中。如何获得更长的线条?现在非常微妙。
答案 0 :(得分:2)
这就是ID的工作方式。您只能拥有一个Id实例(有点-有花招,但您不想这样做)。
改为使用类...
<tagName class="line">
...然后遍历它:
// Selecting all lines
const scrollLineCollection = document.querySelectorAll(".line");
for ( const scrollLine of scrollLineCollection ) {
// do something with scrollLine
}