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

Question

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

Plumb

Have you seen this article: medium.com/@auchenberg/…? – Archy

Yes I did and I even test the provided demo. However the zoom also triggers a full page zoom. The article comments advise to use e.preventDefault(); which doesn't work. – Plumb

Thanks to @Mteuahasan answer I updated the code provided by the OP so that it prevents a full page zoom: codepen.io/ChucKN0risK/pen/YbbjNL. – Plumb

Answer 1

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.

Welldone

I would also add that the e.stopPropagation() isn't needed to prevent the full page zoom ;) – Plumb

Answer 2

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

Try using both of these

Tungting

You need to use both together – Tungting