WordPress多实例SVG滚动绘制触发时机异常问题求助

问题分析 #

原代码的核心问题有两个：

1. 依赖整个页面的滚动百分比计算绘制进度，复用后所有线条都会跟着页面整体滚动进度走，而非对应自己所在区块的滚动区间
2. 页面加载时就初始化了所有线条的状态，没有判断元素是否进入视口，导致未进入视口的线条也提前完成绘制

修正后的实现方案 #

我们需要为每个时间线条目做独立的滚动监听，用IntersectionObserver检测元素进入视口后再启动绘制逻辑，同时基于元素所在容器的滚动区间计算绘制进度，而非全局页面比例。

1. HTML结构（支持复用） #

给每个时间线条目独立容器，每个SVG和path用类名而非唯一ID，方便批量处理：

<!-- 第一个时间线区块 -->
<div class="timeline-section">
  <svg class="timeline-svg" preserveAspectRatio="none" viewBox="0 0 4 100">
    <path class="timeline-path" fill="none" stroke="#000000" stroke-width="1" d="M 0 0 V 100"/>
  </svg>
  <!-- 章节内容 -->
  <div class="timeline-content">章节1内容</div>
</div>

<!-- 第二个时间线区块 -->
<div class="timeline-section">
  <svg class="timeline-svg" preserveAspectRatio="none" viewBox="0 0 4 100">
    <path class="timeline-path" fill="none" stroke="#000000" stroke-width="1" d="M 0 0 V 100"/>
  </svg>
  <div class="timeline-content">章节2内容</div>
</div>

2. CSS样式 #

调整容器布局，让每个时间线区块占据足够高度，确保滚动时有绘制空间：

body {
  margin: 0;
  padding: 0;
}

.timeline-section {
  position: relative;
  height: 100vh; /* 每个区块占一屏高度 */
  margin-bottom: 2rem;
}

.timeline-svg {
  position: absolute;
  left: 2rem;
  top: 0;
  width: 2px;
  height: 100%;
}

.timeline-content {
  margin-left: 4rem;
  padding-top: 2rem;
  max-width: 800px;
}

3. JavaScript逻辑 #

使用IntersectionObserver监听每个区块是否进入视口，每个线条独立计算自己的滚动进度：

// 初始化所有时间线条目
document.addEventListener('DOMContentLoaded', function() {
  const timelinePaths = document.querySelectorAll('.timeline-path');
  
  timelinePaths.forEach(path => {
    const section = path.closest('.timeline-section');
    const length = path.getTotalLength();
    
    // 初始化线条状态：隐藏
    path.style.strokeDasharray = length;
    path.style.strokeDashoffset = length;
    
    // 创建IntersectionObserver，监听区块是否进入视口
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 进入视口后添加滚动监听
          const updateHandler = () => updatePathProgress(path, section, length);
          window.addEventListener('scroll', updateHandler);
          // 立即更新一次当前进度
          updateHandler();
        } else {
          // 离开视口后移除监听，优化性能
          window.removeEventListener('scroll', updateHandler);
        }
      });
    }, { threshold: 0.1 }); // 当元素10%进入视口时触发
    
    observer.observe(section);
  });
});

// 计算并更新单个线条的绘制进度
function updatePathProgress(path, section, totalLength) {
  // 获取区块相对于视口的位置
  const sectionTop = section.offsetTop;
  const sectionHeight = section.offsetHeight;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // 计算当前滚动位置相对于区块的比例：0（区块刚进入视口顶部）到1（区块底部离开视口）
  const progress = Math.max(0, Math.min(1, (scrollTop + window.innerHeight - sectionTop) / (sectionHeight + window.innerHeight)));
  
  // 更新线条绘制状态
  path.style.strokeDashoffset = totalLength - (totalLength * progress);
}

关键改进点 #

• 独立实例化：每个线条对应自己的容器和计算逻辑，不再共用全局滚动比例
• 视口检测：用IntersectionObserver确保线条只有进入视口才开始绘制，避免提前完成
• 性能优化：元素离开视口后移除滚动监听，减少不必要的计算
• 复用性：通过类名批量处理，新增时间线区块只需复制HTML结构，无需修改JS

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