滚动未绑定，我被卡住了答案

【问题标题】：Scroll is not binded, and I am stuck滚动未绑定，我被卡住了
【发布时间】：2021-09-20 19:39:07
【问题描述】：

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 中插入一个类，但问题是这部分代码：

var arrowUp = window.pageYOffset >= 5;

它不会根据滚动动态地获得真或假，并且条件window.pageYOffset >= 5; 现在不是动态地真或假。因此预期的类不会被插入/删除。

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

【问题讨论】：

标签： javascript scroll offset

【解决方案1】：

你不能“动态地”这样做，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);      
});

【讨论】：

【解决方案2】：

为滚动事件添加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');
  }
})

【讨论】：