到达部分后，航点调用功能

Question

因此，当前我正在尝试创建动态SVG，该动态SVG仅在用户滚动到特定部分时才激活。

一旦我转到该部分，我就设置了激活javascript的航点，但是它似乎无法正常工作。我不确定我在做什么错。

这是我的代码

let line = document.getElementById("line");
let length = line.getTotalLength();

// line Scroll
$('.howDoesItWork').waypoint(function() {
  line.style.strokeDasharray = length;
  window.addEventListener("scroll", scrollLine);

  function scrollLine() {
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    var draw = length * scrollpercent;

    // Reverse the drawing (when scrolling upwards)
    line.style.strokeDashoffset = length - draw;
  });

.verticalLine {
    position: absolute;
    display: block;
    height: 930px;
    z-index: -1;
    left: 110px;
    top: 221px;
  }

  .top-line {
    border-left: 4px solid rgba(0, 204, 90, 0.3);
    position: absolute;
    height: 930px;
    z-index: 1;
  }

  svg line { stroke: green; }

<section class="howDoesItWork">
  <section class="container grid">
    <section class="verticalLine">
      <section class="top-line"></section>
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="0" y2="100" stroke-width="1.2" id="line" />
      </svg>
    </section>
  </section>
 </section>