I use two events (scroll and mousewheel).
I would like to get deltaY for mousewheel event to control a slider.
The variable getDelta returns numbers and undefined despite of my condition on mousewheel event.
I would like to get deltaY values outside.
What's wrong please ? Thank you in advance.
$(window).on('scroll mousewheel', function(e) {
if (e.type == "mousewheel") {
var getDelta = e.deltaY;
}
console.log(getDelta);
}
you put console log outside if condition.
$(window).on('scroll mousewheel', function(e) {
var getDelta;
if (e.type == "mousewheel") {
getDelta = e.deltaY;
}
if(getDelta)
{
console.log(getDelta);
}else{
console.log("delta is null");
}
}
The best way (in my view) to get your things done with deltaY / X is to use event listeners. They can be easily attached and detached - by human action or by some automatic trigger generated by your application / script.
Put the code below on a webpage and check if is OK for you.
<script>
// Getting delta trough event listeners
// then passing them as parameters to be consumed by other function(s)
function getDelta (e) // ... starting delta events capture
{
// We capture here both X and Y delta values (but you can use only deltaY) because
// some mice may have left and right buttons on the scroll wheel
// (Logitec g502 / Razer Basilisk / etc, ...)
console.log(e.deltaX + ' <- left right || up down -> ' + e.deltaY);
doSome(e.deltaY, e.deltaX); // ... the function which will consume events
}
function startDelta ()
{
document.addEventListener('wheel', getDelta);
}
function stopDelta () // we stop deltaX and deltaY capture
{
document.removeEventListener('wheel', getDelta);
}
function doSome (y, x) // we pass events as arguments so we can use them
{
if (x > 0)
console.log('some div with overflow will scroll left');
if (x < 0)
console.log('some div with overflow will scroll right');
if (y > 0)
console.log('some div with overflow will scroll up');
if (y < 0)
console.log('some div with overflow will scroll down');
}
</script>
<button onclick="startDelta()"> Start Delta </button>
<button onclick="stopDelta()"> Stop Delta </button>