滚动没有绑定，我卡住了

Question

var id  = document.querySelector("#arrowUp");
var arrowUp = window.pageYOffset >= 5;
console.log(arrowUp);
id.classList.toggle("arrowUp", arrowUp);
id.addEventListener('click', function() {
    window.scrollTo(0, 0);      
})

我正在尝试根据滚动条在某些 HTML 中插入一个 class，但问题是这部分代码：

var arrowUp = window.pageYOffset >= 5;

它不会根据滚动动态地获得真或假，条件 window.pageYOffset >= 5; 现在也不是动态地真或假。因此预期 class 没有得到 inserted/deleted.

这部分代码如何绑定滚动事件

Answer 1

为滚动事件添加 EventListener。

var id = document.querySelector("#arrowUp");

id.addEventListener('click', function() {
  window.scrollTo(0, 0);      
})

window.addEventListener('scroll', function() {
  var arrowUp = window.pageYOffset >= 5;

  if (arrowUp == true) {
    id.classList.add('visible');
  } else {
    id.classList.remove('visible');
  }
})

Answer 2

你不能“动态地”执行此操作，window.pageYOffset 不是神奇的动态变量，它是一个 getter（不带参数的函数，它会检索一些值）

为了使其正常工作，您必须检查每个滚动事件是否满足条件。

var id  = document.querySelector("#arrowUp");
document.addEventListener("scroll", function() {
  var arrowUp = window.pageYOffset >= 5;
  console.log(arrowUp);
  id.classList.toggle("arrowUp", arrowUp);
});
id.addEventListener('click', function() {
    window.scrollTo(0, 0);      
});

滚动没有绑定，我卡住了

Scroll is not binded, and I am stuck

javascript

scroll

offset