Question

74

On CTRL+MOUSEWHEEL event

rated 0 times [ 75] [ 1] / answers: 1 / hits: 17884 / 9 Years ago, mon, october 12, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jarettajb

Add To Favorites

Follow

Total Points: 678

Total Questions: 94

Total Answers: 90

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

jarettajb questions

1 Remove unused Javascript base.js (Youtube iframe api)

Thu, Dec 17, 20, 00:00, 3 Years ago

1 how to define variable google when using google one tap javascript API

Thu, Dec 10, 20, 00:00, 4 Years ago

1 How do I fix this issue: node_modules/expo/AppEntry.js: [BABEL]?

Mon, Nov 9, 20, 00:00, 4 Years ago

1 node js, read a specific column from csv file and convert it to an array to be used in other function

Tue, May 12, 20, 00:00, 4 Years ago

1 Check If Array Has Value in Angular

Tue, May 12, 20, 00:00, 4 Years ago

View All

answered 9 Years ago myakylas · Accepted Answer

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');

         }

    }

});