Блог

Я создаю элемент div, который должен исчезать при прокрутке. Я пробовал просто предупреждать о прокрутке (без замирания) с помощью onscroll, scroll, DOMMouseScroll, mousewheel, также с помощью jquery, но это не работает ни с одним из них. Работает только с onmousewheel в Chrome.

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;
    }
}
  

Что я здесь делаю не так?

Это событие мыши устарело, смотрите это

Попробуйте вместо этого эту и убедитесь, что высота вашего 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(){
	if(window.scrollY > position){
		opacity -= 0.01;
		el.style.opacity = opacity;
        //now update the positoin
        position = window.scrollY;
	}else{
		opacity  = 0.01;
		el.style.opacity = opacity;
        //do it again
        position = window.scrollY;
	}
};
//adding the event listener
window.addEventListener("scroll", effect);  

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

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

Я изменил коэффициент непрозрачности, чтобы вы получили четкое представление об эффекте.