使用添加事件監聽器創建滾動事件-Javascript

Question

我正在嘗試在Vanilla JS中實現某些目標，但沒有發揮作用。 我有一個元素，我想在一定的滾動長度后更改顏色，但是當我使用addEventListener（'scroll'，function）等時，它不起作用，但是在控制台中沒有出現任何錯誤。
任何幫助都是極好的。

艾米莉

代碼在下面，我在這里有一支筆： https : //codepen.io/emilychews/pen/eRYwzm

的HTML

<div class="box"></div>

的CSS

body {height: 200vh;}

.box {
  width: 200px;
  height: 200px;
  background: red;
}

JAVASCRIPT

var box = document.getElementsByClassName('box')[0];

window.addEventListener('scroll', function() {

  if (box.scrollTop > 0) {
    box.style.background = "blue";
  }

});

Answer 1

您必須在文檔body元素上而不是在框上獲取scrollTop 。 在您的情況下， box.scrollTop將始終為0 。

替換為：

  if (box.scrollTop > 0) {
    box.style.background = "blue";
  }

有了這個：

  if (document.body.scrollTop > 0) {
    box.style.background = "blue";
  }

還要注意，到目前為止，最好在嚴格模式下使用window.pageYOffset，因為document.body.scrollTop已棄用。 閱讀本文以了解有關整個窗口上滾動檢測的更多信息。

演示： https : //codepen.io/anon/pen/mwdZwL