On CTRL+MOUSEWHEEL event

Question

I was asked to implement ctrl+mousewheel event for our page site in order to change image offset on user zoom in or zoom out. I found this old answer Override browsers CTRL+(WHEEL)SCROLL with javascript and I`ve tried to do the same. I downloaded the jQuery Mouse Wheel Plugin for the implementation and here is my code:

var isCtrl = false;  
       $(document).on('keydown keyup', function(e) {
            if (e.which === 17) {
                isCtrl = e.type === 'keydown' ? true : false;
            }
        }).on('mousewheel', function(e, delta) { // `delta` will be the distance that the page would have scrolled;
            // might be useful for increasing the SVG size, might not
            if (isCtrl) {
                e.preventDefault();
                alert('wheel');
            }
        });

The events works fine separately, but if I hold the CTRL button and wheel the mouse the wheel event does not fire. Does any one have better solution for this or may be I did something wrong?

Solution 1

Fiddle, In order for it to work you have to click in the result box first before trying.

$(window).bind('mousewheel DOMMouseScroll', function(event) 
{
    if(event.ctrlKey == true)
    {
        event.preventDefault();
        if(event.originalEvent.detail > 0) {
             console.log('Down');
         }else {
             console.log('Up');
         }
    }
});

Solution 2

To check if the ctrl key is clicked, the event already provides a way to do that. Try this:

.on('mousewheel', function(e) { 
    if (e.ctrlKey) {
        e.preventDefault();
        alert('wheel');
    }
});

This also works for e.shiftKey, e.altKey etc. I would only listen for the scroll event and there I would check if the ctrlKey is down.

Comments

[AlexBerd]

How to check in wheel event if there is holded ctrl key by user? You can not reveal this from wheel event...

[divoom12]

@AlexBerd Try this in the console to get a better idea: document.body.onwheel = function(e){console.log(e.ctrlKey)}

[AlexBerd]

The way you do zomming is you hold the control button and then you wheel the mouse...try now in chrome

[divoom12]

@AlexBerd Yes. But see the console. It's logging true/false if you're holding ctrl down or not

[AlexBerd]

Yes, I see it works in the Crome, but I think you solution is not cross browser compatible

[divoom12]

@AlexBerd it should be. Every major browser (even IE) handles this correctly

[Thaillie]

@YavorIvanov Not all browser support it, some need DOMMouseScroll instead of mousewheel.

[Morten Holmgaard]

I use event.originalEvent.wheelDelta < 0 to detect up/down scroll

[Thomas Darvik]

The detail was always 0 for me, so I changed your code to use event.originalEvent.deltaY which will be given the values -100 or 100 depending on the direction. Not sure if that is just a problem for me, but I am posting a comment here if anyone has the same problem.

[Thomas Darvik]

Edit for my comment: deltaY was not defined, so I used wheelDelta... To make this work in IE.