Exit from iteration in loop and back in?

Question

JavaScript

There is such a script that draws svg by scrolling,
there is an array of elements called elem,
how to go into the cycle and add a class to the element when scrolling, add a class to the next block on the next scroll?
Now, when scrolling, a cycle is launched and added to everything.

function scroller(){
    var path = document.querySelector('#road2'),
        pathLength = path.getTotalLength(),
        elem = document.getElementsByClassName('project-item');

    path.style.strokeDasharray = pathLength + ' ' + pathLength;
    path.style.strokeDashoffset = pathLength;
    path.getBoundingClientRect();

    window.addEventListener("scroll", function(e) {

          var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight),
              drawLength = pathLength * scrollPercentage;
 
          path.style.strokeDashoffset = pathLength - drawLength;
        
          if (scrollPercentage >= 0.99) {
              path.style.strokeDasharray = "none";
          } else {
              path.style.strokeDasharray = pathLength + ' ' + pathLength;
              for(var i = 0; i < elem.length; ++i){
                  elem[i].classList.add("main--main-bg");
              }

          }
    });
}
scroller();