添加JavaScript函数后滚动事件监听器失效问题求助

问题根源 #

滚动事件失效的核心原因有两个：

1. DOM节点引用失效：fixUTSWBreaks函数通过innerHTML重写了.wrapper的全部内容，导致之前用getElementsByTagName('section')获取的sections集合变成了已被销毁的旧DOM节点引用——getElementsByTagName返回的是动态HTMLCollection，DOM重构后旧引用直接失效，滚动逻辑依赖这些旧节点的offsetTop和offsetHeight自然无法工作。
2. 函数调用错误：handleDOMContentLoaded里调用的是fixSpaceBreaks()，但你的函数实际命名是fixUTSWBreaks，这会直接抛出错误中断后续代码执行。

修复方案 #

1. 修正函数调用错误 #

把handleDOMContentLoaded里的fixSpaceBreaks()改为fixUTSWBreaks()。

2. 精准替换文本（推荐方案） #

避免用innerHTML重写整个容器，改为递归遍历文本节点替换目标字符串，不破坏原有DOM结构：

// Fix Bi Directional space breaks
function fixUTSWBreaks() {
  const wrapper = document.querySelector('.wrapper');
  if (!wrapper) return;

  // 递归遍历所有文本节点
  function traverse(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      // 用Unicode非断空格替换普通空格
      node.textContent = node.textContent.replace(/Bi Directional/g, 'Bi\u00A0Directional');
    } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'SCRIPT' && node.tagName !== 'STYLE') {
      // 跳过脚本和样式标签，递归处理子节点
      for (let child of node.childNodes) {
        traverse(child);
      }
    }
  }

  traverse(wrapper);
}

3. 若坚持使用innerHTML，需重建DOM引用 #

如果一定要用innerHTML批量替换，要在替换后重新获取section元素并重建导航、滚动逻辑：

// 把导航生成逻辑封装成可复用函数
let sections;
let liElements;

function buildSectionNav() {
  const ulElement = document.getElementById('section-list');
  ulElement.innerHTML = ''; // 清空原有导航
  liElements = []; // 重置li元素数组

  // 重新获取最新的section元素
  sections = document.getElementsByTagName('section');

  for (let i = 0; i < sections.length; i++) {
    const section = sections[i];
    const liElement = document.createElement('li');
    const anchorElement = document.createElement('a');
    
    anchorElement.href = '#' + section.id;
    const headingElement = section.querySelector('h2') || section.querySelector('h1');
    anchorElement.innerText = headingElement.innerText;

    liElement.appendChild(anchorElement);
    ulElement.appendChild(liElement);
    liElements.push(liElement);
  }

  if (liElements.length > 0) {
    liElements[0].classList.add('active');
  }
}

// 修改DOM加载完成后的处理逻辑
function handleDOMContentLoaded() {
  setCopyrightYear();
  fixUTSWBreaks();
  buildSectionNav(); // 替换后重新构建导航
}

4. 优化滚动监听逻辑（可选） #

用IntersectionObserver替代滚动事件监听，性能更优且逻辑更简洁：

function setupActiveSectionObserver() {
  if (!sections.length) return;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const index = Array.from(sections).indexOf(entry.target);
      if (entry.isIntersecting) {
        // 移除所有li的active类
        liElements.forEach(li => li.classList.remove('active'));
        // 给当前可见section对应的li添加active类
        liElements[index]?.classList.add('active');
      }
    });
  }, { threshold: 0.1 }); // 当section可见度达到10%时触发

  // 监听所有section元素
  Array.from(sections).forEach(section => observer.observe(section));
}

// 在buildSectionNav末尾调用该函数
function buildSectionNav() {
  // ...原有导航生成逻辑...
  setupActiveSectionObserver();
}

最终完整代码 #

// Set copyright year
function setCopyrightYear() {
  const yearElement = document.getElementById('current-year');
  if (yearElement) {
    yearElement.textContent = new Date().getFullYear();
  }
}

// Section navigation and active state management
let sections;
let liElements;

function buildSectionNav() {
  const ulElement = document.getElementById('section-list');
  ulElement.innerHTML = '';
  liElements = [];

  sections = document.getElementsByTagName('section');

  for (let i = 0; i < sections.length; i++) {
    const section = sections[i];
    const liElement = document.createElement('li');
    const anchorElement = document.createElement('a');
    
    anchorElement.href = '#' + section.id;
    const headingElement = section.querySelector('h2') || section.querySelector('h1');
    anchorElement.innerText = headingElement.innerText;

    liElement.appendChild(anchorElement);
    ulElement.appendChild(liElement);
    liElements.push(liElement);
  }

  if (liElements.length > 0) {
    liElements[0].classList.add('active');
  }

  setupActiveSectionObserver();
}

// Fix Bi Directional space breaks
function fixUTSWBreaks() {
  const wrapper = document.querySelector('.wrapper');
  if (!wrapper) return;

  function traverse(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replace(/Bi Directional/g, 'Bi\u00A0Directional');
    } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'SCRIPT' && node.tagName !== 'STYLE') {
      for (let child of node.childNodes) {
        traverse(child);
      }
    }
  }

  traverse(wrapper);
}

// Intersection Observer for active section
function setupActiveSectionObserver() {
  if (!sections.length) return;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const index = Array.from(sections).indexOf(entry.target);
      if (entry.isIntersecting) {
        liElements.forEach(li => li.classList.remove('active'));
        liElements[index]?.classList.add('active');
      }
    });
  }, { threshold: 0.1 });

  Array.from(sections).forEach(section => observer.observe(section));
}

// DOMContentLoaded handler
function handleDOMContentLoaded() {
  setCopyrightYear();
  fixUTSWBreaks();
  buildSectionNav();
}

// Initialize
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  handleDOMContentLoaded();
} else {
  document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
}

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