zooming - How can I prevent full page zoom on mousewheel event in Javascript? - Stack Overflow

admin管理员组

文章数量:1310108

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

Share Improve this question Follow asked Jun 5, 2019 at 17:18 ChucKN0risKChucKN0risK 42522 gold badges99 silver badges1818 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

本文标签： zoomingHow can I prevent full page zoom on mousewheel event in JavascriptStack Overflow