なぜonscroll関数が機能しないのですか？

Question

私はスクロールでフェードイン/アウトするdiv要素を作っています。私はonscroll、scroll、DOMMouseScroll、mousewheelをjqueryと一緒に使ってスクロール（フェードしないで）を警告するだけでしたが、これらのどれでも動作しません。 Chromeのonmousewheelでのみ動作します。

https://jsfiddle.net/643v7rod/

var el = document.getElementById('el'); 

var opacity = 1; 
el.onmousewheel = function(e){ 
    if(e.deltaY > 0){ 
     opacity -= 0.25; 
     el.style.opacity = opacity; 
    }else{ 
     opacity += 0.25; 
     el.style.opacity = opacity; 
    } 
} 

私はここで間違って何をしているのですか？マウスイベントは廃止されたことを

Answer 1

、this

が代わりにこれを試してみてください、とあなたがスクロールすることができるように、あなたのdivの高さが十分であることを確認してください:)

var el = document.getElementById('el'); 
 
var opacity = 1; 
 
//if you want to be able to revert the effect, you will 
 
//have to store the current window position 
 
//in a variable and update it each time; 
 
var position = window.scrollY; 
 
//declaring the function 
 
function effect(){ 
 
\t if(window.scrollY > position){ 
 
\t \t opacity -= 0.01; 
 
\t \t el.style.opacity = opacity; 
 
     //now update the positoin 
 
     position = window.scrollY; 
 
\t }else{ 
 
\t \t opacity += 0.01; 
 
\t \t el.style.opacity = opacity; 
 
     //do it again 
 
     position = window.scrollY; 
 
\t } 
 
}; 
 
//adding the event listener 
 
window.addEventListener("scroll", effect);

#el { 
 
\t width: 300px; 
 
\t height: 1200px; 
 
\t background-color: red; 
 
}

<div id="el"></div>

見ます不透明度を変更して、効果を明確に視覚化しました。