JavaScript onscroll函数失效：滚动25像素后无法为元素添加类

嘿，我一眼就发现你代码里的关键问题啦——window.onscoll拼写错误！少了一个字母r，正确写法是window.onscroll，这就是滚动事件完全没触发的核心原因。除此之外还有几个小细节需要调整，下面给你完整的修复方案：

问题点梳理 #

• 拼写错误：window.onscoll → window.onscroll（这是事件不触发的根本原因）
• 未定义变量：console.log(arrow)里的arrow没有声明，需要先通过getElementById获取元素再打印
• CSS语法冗余：margin: -200px 00px 0px 0px多写了一个0，改成margin: -200px 0 0 0更规范

修正后的完整代码 #

JavaScript代码

window.onscroll = function() { showArrow() };
function showArrow() {
  // 兼容不同浏览器的scrollTop获取方式
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  const hideArrowEl = document.getElementById("hide_Arrow");
  
  if (scrollTop > 25) {
    hideArrowEl.className = "show";
  } else {
    hideArrowEl.className = "";
  }
}
// 先获取元素再打印，避免未定义报错
const arrow = document.getElementById("arrow");
console.log(arrow);

CSS代码

#arrow {
  position: relative;
  height: 270px;
  display: block;
  margin: -20px auto;
  overflow: hidden;
}
#hide_Arrow {
  height: 0px;
  margin: -200px 0 0 0;
  overflow: hidden;
  /* 加上过渡动画，显示/隐藏更平滑 */
  transition: height 0.3s ease;
}
#hide_Arrow.show {
  height: 250px;
}

HTML部分（无需修改）

<div id="hide_Arrow">
  <img id="arrow" src="media/Arrow_down.png" alt="Arrow Down">
</div>

额外小建议：给#hide_Arrow加上transition过渡属性，箭头显示/隐藏时会有平滑的动画效果，用户体验会更好~

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