javascript - 在滚动时将活动类切换到时间线元素

Question

我有这个用 SVG 制作的滚动时间线。
左侧有一个“时间轴”，其中包含部分（在我的情况下为年份）
，右侧是时间轴上锚点的链接
链接正在工作并链接到时间轴上的特定部分
但是，我还需要链接来触发一个“点击”功能
，所以我不仅通过点击而且
在滚动时获得相同的点击“活动”效果

• 我使用香草 Javascript

Javascript：

const yearbookMenu = document.querySelector(".yearbook ul");
const marker = document.querySelector(".indicator");
const menuLink = document.querySelectorAll(
  "#journey .timeline-holder .yearbook ul li"
);

if (typeof yearbookMenu != "undefined" && yearbookMenu != null) {
  for (let i = 0; i < menuLink.length; i++) {
    menuLink[i].addEventListener("click", function () {
      let current = document.getElementsByClassName("active");
      let menuItemPoition = this.offsetTop;
      // If there's no active class
      if (current.length > 0) {
        current[0].className = current[0].className.replace(" active", "");
      }
      // Add the active class to the current/clicked button
      this.className += " active";
      marker.style.transform = `translateY(${menuItemPoition}px)`;
    });
  }
}

const journey = document.querySelector("#journey");
document.addEventListener("scroll", function (e) {
  let windowPosition = window.scrollY;
  let positionJourney = journey.offsetTop;
  let positionPath = windowPosition - positionJourney;
  // console.log(journey.scrollTop + position);
  let svgMask = document.querySelector(".mask-path");
  svgMask.style["stroke-dashoffset"] = 10000 - positionPath * 3;
});

这是一个平底锅： https ://codepen.io/hamergil/pen/NWjeKoJ

想获得帮助或指导
在此先感谢

标签： javascriptscrollclicktimeline