javascript - 如何通过滚动而不刷新来检测y偏移量的变化

Question

我正在尝试滚动到顶部按钮，我需要该按钮仅在 y 偏移量 = 400 时出现， 它在页面刷新或最近打开时工作，但它无法检测到 y 偏移量的变化，因此该按钮不是动态的，仅适用于刷新并仅在加载时检测 y 偏移量的位置我如何让按钮检测到通过滚动而不刷新的 y 偏移位置。

var goup = document.getElementById("top");

(window.pageYOffset.onchange = function() {
  if (window.pageYOffset >= 400) {
    goup.style.display = "block";
  } else {
    goup.style.display = "none";
  }
})();

#top {
  background-color: red;
  color: white;
  border-radius: 100%;
  padding: 10px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: none;
  display: none;
}

<button id="top">top</button>

Answer 1

window.pageYOffset.onchange 将不起作用。 pageYOffset 是一个纯数字，因此没有 onchange 或任何其他事件。它在刷新上起作用的原因是偶然的，因为回调函数在加载时被调用一次(函数末尾的 () )。因此，即使 pageYOffset.onchange 有效，它也不适用于您的代码。

您必须监听窗口上的滚动事件:

window.addEventListener('scroll', function () {
    // the page was scrolled (horizontally or vertically)
});

var goup = document.getElementById("top");

window.addEventListener('scroll', function() {
  if (window.pageYOffset >= 400) {
    goup.style.display = "block";
  } else {
    goup.style.display = "none";
  }
})

body {
  height: 1000px;
}

#top {
  background-color: red;
  color: white;
  border-radius: 100%;
  padding: 10px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  border: none;
  display: none;
}

<button id="top">top</button>