CODEWITHSUNDEEP
javascriptzoomingmousewheeltrackpad
ChucKN0risK
ChucKN0risK

Reputation: 425

How can I prevent full page zoom on mousewheel event in Javascript?

I want to be able to use the trackpad and the wheel event to update the scale of a DOM element. It works like expected however on several browsers it also perform a full page zoom.

I want to keep my scale update but I want to prevent the full page zoom.

I've read that adding e.preventDefault in the wheel event would prevent that. I had it but it doesn't seem to work.

Here's my codepen: https://codepen.io/ChucKN0risK/full/JqwrVe

Upvotes: 6

Views: 3017

Answers (2)

Mteuahasan
Mteuahasan

Reputation: 520

Event binded at document level (window.document, window.document.body, or window) are treated as passive and can't be prevented. You should specify that the event is not passive with { passive: false } as third parameter of your addEventListener function. See this link for more info.

In your case :

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (e.ctrlKey) {
        var s = Math.exp(-e.deltaY / 100);
        scale *= s;
    } else {
        var direction = 1; //natural.checked ? -1 : 1;
        tx += e.deltaX * direction;
        ty += e.deltaY * direction;
    }
    var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
    box.style.webkitTransform = transform;
    box.style.transform = transform;
}, {
    passive: false // Add this
});

Moreover it won't work on codepen due to the use of the iframe as event is binded on the iframe and not on the codepen page itself.

Upvotes: 9

Dave Keane
Dave Keane

Reputation: 737

e.preventDefault();  e.stopPropagation();

Try using both of these

Upvotes: 1

Related Questions