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:

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

• javascript
• zooming
• mousewheel
• trackpad

• Have you seen this article: medium./@auchenberg/…? – Cohars Commented Jun 6, 2019 at 8:48
• Yes I did and I even test the provided demo. However the zoom also triggers a full page zoom. The article ments advise to use e.preventDefault(); which doesn't work. – ChucKN0risK Commented Jun 6, 2019 at 9:02
• 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. – ChucKN0risK Commented Jun 6, 2019 at 9:54

2 Answers 2

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.

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

Try using both of these