添加事件監聽器創建一個滾動事件 - Javascript

我試圖在香草JS中實現某些東西，但它不是在玩球。我有一個元素，我想改變一定的滾動長度後的顏色，但是當我使用addEventListener（'滾動'，函數）等它不工作，但我沒有得到我的控制檯中的任何錯誤。
任何幫助將是真棒。添加事件監聽器創建一個滾動事件 - Javascript

艾米莉

的代碼如下，我這裏有一個筆：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"; 
    } 

});

來源

2017-06-04 The Chewy

這是因爲'box.scrollTop'總是返回'0'。在你的'if（）'語句上面添加'console.log（box.scrollTop）;'，你會在控制檯中看到'box.scrollTop'的結果。 – NewToJS

您必須在文檔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在嚴格模式過時。 Read this瞭解更多關於整個窗口滾動檢測的信息。

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

來源

2017-06-04 17:00:26 Cristy

非常感謝Cristy –

添加事件監聽器創建一個滾動事件 - Javascript

回答

相關問題