1

I recently discovered that while my usual way to zoom in/out in a browser (Firefox), pressing CTRL and using the mouse wheel to "scroll up/down" works well on both Firefox and Chromium based browsers, it does not work similarly with the mouse pad.

Even on the same systems Chromium (based browsers) do not take the scroll events sent by the touch pad to use it for zooming, while it does for scrolling.

Wanting to achieve the same behavior on both browsers (I know, that's not a good idea in general) in my personal (pure JavaScript based) web-project, I soon found myself tinkering with eventListeners and basically re-implementing the zoom-behavior - but without knowing what's really going on in the first place.

Is there a reason for this difference in behavior? It seems to be similar among modern Linux distributions and even Windows..

Is there a common way or guideline to handle control events / gestures in JavaScript when it comes to zooming in (e.g in galleries/drawing apps/maps/..)? Maybe some terminology I should know to inform myself?

frans
  • 8,868
  • 11
  • 58
  • 132

1 Answers1

0

I'm not sure if I'm gonna mark this the answer, since it's not, what I wanted in the first place..

What I'm currently doing is close to what you'll find at other places too

// set an initial zoom level
var zoom = 1.0;

// only handle Chromium - you might want to consider handling
// other browsers equally instead
if (!!window.chrome) {
    window.addEventListener("wheel", (event) => {
        const sign = Math.sign(event.deltaY);

        // only act if CTRL key is pressed and we're actually zooming
        if (!event.ctrlKey || sign == 0) {
            return;
        }

        // make sure we don't accidentally scroll up/down
        event.preventDefault();

        // calculate and apply new zoom level
        zoom = Math.max(1.0, zoom * (sign > 0 ? 0.9 : 1.1));
        document.body.style.transformOrigin = "0 0";
        document.body.style.transform = `scale(${zoom})`;

    }, {passive: false});  // needed to be able to preventDefault()
}

see Zoom Vs. Scale in CSS3 regarding zoom or scale

frans
  • 8,868
  • 11
  • 58
  • 132