JS Timeline页面加载时滚动到指定事件的代码修改方案咨询

我有一个可正常运行的时间轴组件，希望实现页面加载时自动滚动到指定事件位置，让过往事件不再处于可视区域。以下是我的现有JS代码：

(function() {

  // VARIABLES
  const timeline = document.querySelector(".timeline ol"),
    elH = document.querySelectorAll(".timeline li > div"),
    arrows = document.querySelectorAll(".timeline .arrows .arrow"),
    arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
    arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
    firstItem = document.querySelector(".timeline li:first-child"),
    lastItem = document.querySelector(".timeline li:last-child"),
    xScrolling = 280,
    disabledClass = "disabled";

  // START
  window.addEventListener("load", init);

  function init() {
    setEqualHeights(elH);
  }

  // SET EQUAL HEIGHTS
  function setEqualHeights(el) {
    let counter = 0;
    for (let i = 0; i < el.length; i++) {
      const singleHeight = el[i].offsetHeight;

      if (counter < singleHeight) {
        counter = singleHeight;
      }
    }

    for (let i = 0; i < el.length; i++) {
      el[i].style.height = `${counter}px`;
    }
  }

})();

实现步骤： #

1. 标记目标事件：给你想要滚动到的时间轴事件（<li>元素）添加自定义类，比如target-event，方便JS定位。

2. 添加滚动逻辑：在init函数中加入滚动到目标元素的代码，以下两种方式任选其一：

方式一：使用scrollIntoView（简洁直观，推荐）

该方法会自动将目标元素滚动到可视区域，可配置对齐方式：

修改后的完整代码：

(function() {

  // VARIABLES
  const timeline = document.querySelector(".timeline ol"),
    elH = document.querySelectorAll(".timeline li > div"),
    arrows = document.querySelectorAll(".timeline .arrows .arrow"),
    arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
    arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
    firstItem = document.querySelector(".timeline li:first-child"),
    lastItem = document.querySelector(".timeline li:last-child"),
    targetItem = document.querySelector(".timeline li.target-event"), // 新增：获取目标事件元素
    xScrolling = 280,
    disabledClass = "disabled";

  // START
  window.addEventListener("load", init);

  function init() {
    setEqualHeights(elH);
    scrollToTargetEvent(); // 新增：调用滚动函数
  }

  // 新增：滚动到目标事件的函数
  function scrollToTargetEvent() {
    if (targetItem) {
      // 将目标元素滚动到可视区域左侧对齐，过往事件会被滚出可视区
      targetItem.scrollIntoView({
        behavior: "smooth", // 可选：平滑滚动效果，移除则为瞬间滚动
        block: "nearest",
        inline: "start"
      });
    }
  }

  // SET EQUAL HEIGHTS
  function setEqualHeights(el) {
    let counter = 0;
    for (let i = 0; i < el.length; i++) {
      const singleHeight = el[i].offsetHeight;

      if (counter < singleHeight) {
        counter = singleHeight;
      }
    }

    for (let i = 0; i < el.length; i++) {
      el[i].style.height = `${counter}px`;
    }
  }

})();

方式二：手动计算滚动距离（灵活可控）

如果需要精细控制滚动位置，可手动计算timeline的scrollLeft值：

// 替换scrollToTargetEvent函数为以下代码
function scrollToTargetEvent() {
  if (targetItem && timeline) {
    // 计算目标元素相对于timeline的左侧偏移量，直接设置滚动位置
    const targetOffset = targetItem.offsetLeft;
    timeline.scrollLeft = targetOffset;
    // 可选：平滑滚动
    // timeline.animate({ scrollLeft: targetOffset }, 500);
  }
}

注意事项： #

• 确保目标<li>标签已正确添加target-event类。
• 若不需要平滑滚动，可移除behavior: "smooth"参数（或注释掉animate代码）。

内容的提问来源于stack exchange，提问作者user12327549