Javascript onscroll功能不起作用

Question

我想在用户滚动超过25像素时向class添加id。我不确定为什么但是我上学后这个功能没有解雇。任何帮助，为什么会非常感激。这是我的代码：

window.onscoll = function() {
  showArrow()
};

function showArrow() {
  if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
    document.getElementById("hide_Arrow").className = "show";
  } else {
    document.getElementById("hide_Arrow").className = "";
  }
}
console.log(arrow);

#arrow {
  position: relative;
  height: 270px;
  display: block;
  margin: -20px auto;
  overflow: hidden;
}

#hide_Arrow {
  height: 0px;
  margin: -200px 00px 0px 0px;
  overflow: hidden;
}

#hide_Arrow.show {
  height: 250px;
}

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

Answer 1

我认为你有一个错字。

改变这个：

window.onscoll = function(){showArrow()};

为此：

window.onscroll = showArrow;

希望它有所帮助！

Answer 2

嗨，我在JavaScript文件中按照以下代码编写代码时也遇到了同样的问题并已解决...

window.addEventListener('scroll', function() {
   showArrow()
});

function showArrow() {
  if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
    document.getElementById("hide_Arrow").className = "show";
  } else {
    document.getElementById("hide_Arrow").className = "";
  }
}
console.log(arrow);