<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2>How can I trigger onwheel event up and down effect in javascript?</h2>
<label>event </label>
<div class="alert alert-danger" id="eventOlay">
<p id="sonucMetin">.</p>
</div>
<label>process </label>
<div class="alert alert-success" id="demo">
.
</div>
</div>
let c = 0;
window.addEventListener('wheel', function(event) {
if (event.deltaY < 0) {
$("#sonucMetin").html("up mouse whell");
if (c == 0) { // no negative values
demo.innerHTML = 0;
} else {
c--;
demo.innerHTML = c;
}
} else if (event.deltaY > 0) {
$("#sonucMetin").html("down mouse whell");
//if (c != 0) {
c++;
demo.innerHTML = c;
// }
}
});
/*
window.onwheel = function(event) {
if (event.deltaY > 0) {
// down
} else {
// up
}
}
*/
