Chrome控制台报错Uncaught TypeError: 无法读取null的scrollHeight属性

常见错误原因及对应修复 #

1. 循环变量未声明导致全局污染
   你的循环里i没有用let/const声明，会变成全局变量，可能导致循环逻辑异常。把循环改成：

   for (let i = 0; i < act.length; i++) {
       // ... 原有逻辑
   }
   

2. DOM元素不存在时的空值报错
   当按钮的nextElementSibling不是预期的.history-panel，或者panel的下一个元素为空时，访问content.scrollHeight会直接抛出错误。需要添加空值判断：

   let panel = this.nextElementSibling;
   if (!panel) return; // 没有panel直接终止
   let content = panel.nextElementSibling;
   if (!content) return; // 没有content直接终止
   

3. 样式判断逻辑不严谨
   你只通过panel.style.maxHeight判断折叠状态，但如果初始maxHeight是通过CSS类设置的，这个判断会失效。建议改用CSS类控制状态，更稳定：

   • 先写CSS：

     .history-panel {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease;
     }
     .history-panel.expanded {
         max-height: fit-content; /* 或者根据需求设具体数值 */
     }
     

   • 修改JS逻辑，用类替代直接操作style：

     // 重置所有panel
     allPanels.forEach(panel => {
         panel.classList.remove('expanded');
     });
     // 切换当前panel
     panel.classList.toggle('expanded');
     

完整修复后的代码 #

window.addEventListener("load", function () {
    const act = document.getElementsByClassName("collapsible-btn");

    for (let i = 0; i < act.length; i++) {
        act[i].addEventListener("click", function () {
            // 重置所有panel的展开状态
            const allPanels = document.querySelectorAll(".history-panel");
            allPanels.forEach(panel => {
                panel.classList.remove("expanded");
            });
            // 重置所有按钮的active状态
            const allButtons = document.querySelectorAll(".collapsible-btn");
            allButtons.forEach(button => {
                button.classList.remove("active");
            });

            // 空值检查，避免报错
            let panel = this.nextElementSibling;
            if (!panel) return;
            let content = panel.nextElementSibling;
            if (!content) return;

            // 切换当前按钮和panel的状态
            this.classList.toggle("active");
            panel.classList.toggle("expanded");
        });
    }
});

补充说明 #

• 如果必须用scrollHeight设置maxHeight，要确保content存在后再访问该属性，同时把CSS里的maxHeight初始值设为0。
• 用onclick属性时，要确保绑定的函数全局可访问，或者采用事件委托方式（给父元素绑定事件，通过target类名判断处理），避免循环绑定的问题。

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