CODEWITHSUNDEEP
javascript
Mansour
Mansour

Reputation: 1810

Override browsers CTRL+(WHEEL)SCROLL with javascript

In most browsers on linux, CTRL+(WHEEL)SCROLL allows the user to zoom in and out of the page by enlarging or shrinking the size of all elements. Now I want to override this behaviour and get CTRL+WHEEL to zoom into an SVG element I have by applying affine transformations.

Is this possible? Specifically, is it possible to catch this keyboard/mouse event as well as suppressing the browser's default behaviour?

Upvotes: 12

Views: 13379

Answers (3)

Amber
Amber

Reputation: 2463

To add on to sdleihssirhc's answer... Instead of keeping track of the ctrl key yourself you can call e.ctrlKey in the wheelCheck method (in place of isCtrl). This will return true if the ctrl key was down.

I haven't confirmed this works on other platforms, but in Windows it works in Chrome, Explorer, and FireFox.

Upvotes: 2

sdleihssirhc
sdleihssirhc

Reputation: 42496

There are a lot of difficulties in a question like this. Basically, there are two steps:

  1. Listen for the keydown and keyup events, and keep track of when Ctrl is down
  2. Listen for the mouse wheel, and (if Ctrl is down) do what you want

But here are the problems you have to address:

  • How are you going to apply the event listeners/handlers?
  • According to QuirksMode, browsers on Mac don't return an accurate keycode for Ctrl.
  • Also according to QuirksMode, Firefox doesn't support the mousewheel event. You'll have to use DOMMouseScroll instead.
  • According to the MDC, there are some instances where the DOMMouseScroll event, when used with Ctrl, never even gets fired!

I'm not saying they're insurmountable, or even that they're big problems. Using a good JavaScript library should abstract away most of them, if not all. Being selective in your choice of browsers/OSs to support will also help quite a bit, if that's doable.

If I were to do this with jQuery (and a jQuery mousewheel plugin), it would look something like this:

(function ($) {
    var isCtrl = false;

    function ctrlCheck(e) {
        if (e.which === 17) {
            isCtrl = e.type === 'keydown' ? true : false;
        }
    }

    function wheelCheck(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();
            yourResizeMethod(delta);
        }
    }

    $(document).
        keydown(ctrlCheck).
        keyup(ctrlCheck).
        mousewheel(wheelCheck);
}(jQuery));

Upvotes: 17

ruakh
ruakh

Reputation: 183484

https://developer.mozilla.org/en/Code_snippets/Miscellaneous#Detecting_mouse_wheel_events describes how to add a handler for mousewheel events in Firefox — including, theoretically, Ctrl+mousewheel events — but it mentions that if the user's preferences are such that a given modifier+mousewheel combination changes the text size, then these event-listeners will not be called. So, it doesn't seem to be possible (though I haven't tested myself to confirm the accuracy of that page).

Other browsers may behave differently, of course. If you're O.K. with it not working in Firefox, you can try registering your handler by setting window.onmousewheel.

Upvotes: 1

Related Questions