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>
kmkrtich
  • 71
  • 1
  • 4
  • Possible duplicate of [How can I "disable" zoom on a mobile web page?](http://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page) – LellisMoon Feb 15 '17 at 09:33
  • 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 help – kmkrtich Feb 16 '17 at 10:04
  • So you need to disable the browser zoom example ctrl +/-? – LellisMoon Feb 16 '17 at 11:03
  • 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. – kmkrtich Feb 16 '17 at 15:46

1 Answers1

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 }
);
Ben Swinburne
  • 25,669
  • 10
  • 69
  • 108