Disable chrome pinch zoom with javascript
Asked Answered
S

1

6

Is there a way to disable chrome pinch zoom with javascript. I don't want to change anything in chrome://flags I want to disable chrome's default zooming and sliding to previous page behaviors and instead I want to write my own panning/zooming code. I'm able to handle all that events but calling 'preventDefault' doesn't help. Handling of mousewheel, ctrl+ and ctrl- events and calling 'preventDefault' there also does not help.

Finally I want to have custom multitouch zooming with 2 fingers and panning capabilities for chrome and IE 11. IE panning works perfectly for me, but zooming doesn't.

Sample script below:

  <!DOCTYPE html>
    <html>
    <head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

    <script type="text/javascript" src="Scripts/jquery-3.1.0.js" ></script>

    <script type="text/javascript" >
      document.addEventListener('touchstart', function(event){
          event.preventDefault();
      });
      document.addEventListener('touchend', function(event){
          event.preventDefault();
      });
      document.addEventListener('touchmove', function(event){
          event.preventDefault();
      });
      $('*').bind('touchmove', false);
    </script>

   <body>
   <h1 align="center">
    TEST STRING FOR PINCH ZOOM
    </h1>
    </body>
    </html>
Stoller answered 15/2, 2017 at 9:23 Comment(4)
Possible duplicate of How can I "disable" zoom on a mobile web page?Brockbrocken
no, it's not related to mobile. I'm having that issue in chrome browser on Windows 10 desktop (all in on PC). Though I specified all meta keywords mentioned with your link and it doesn't helpStoller
So you need to disable the browser zoom example ctrl +/-?Brockbrocken
No, By default on GoogleChrome browser if you open any website zooming works on whole content of webpage. I mean if you zoom on touch screen laptop with 2 fingers. It does zoom like an image. I want to handle that part. Prevent default behaviour and add my custom zooming logic which will work only on specific part of my webpage.Stoller
R
8

This works for me in case anyone shows up here looking for an answer.

document.addEventListener(
  'wheel',
  function touchHandler(e) {
    if (e.ctrlKey) {
      e.preventDefault();
    }
  },
  { passive: false }
);
Rosas answered 27/1, 2020 at 17:49 Comment(3)
Man, that is what I was looking for 6 months... Thanks a lot!Waxwork
Still possible to pinch zoom on the scrollbar, if your web page is long enough to have a scrollbar 🤷🏻‍♂️Doggy
On which browser/os? I just tried on chrome/osx and it works fineRosas

© 2022 - 2024 — McMap. All rights reserved.