Disable zoom?

[adatdeltax]

I have implemented zoomin and zoom out using button and I am trying to disable default scroll-based zoom , I have tried using the disableZoom option mentioned here https://github.com/timmywil/panzoom#zoomoptions , which unfortunately did not work. Is there any other way I can achieve this or any other prop? This is what I have tried. https://codesandbox.io/s/poc-zoompan-2we0v?file=/src/App.vue

[mistabiggx]

First, the documentation/library you're referring to has no relationship with this library. The base library is https://github.com/anvaka/panzoom

Looking at your fiddle, you're on the right path to implementing the beforeWheel option, but you have to move the handler to a method.

Therefore your code

        <panZoom
          height="100%"
          width="100%"
          ref="panZoom"
          selector="#zoomable"
          id="canvasContainer"
          :options="{   autocenter: true,
          bounds: false,
          minZoom: 0.5,
          maxZoom: 3,
          smoothScroll: false,
          transformOrigin: {x: 0, y: 0},
          zoomDoubleClickSpeed: 1,
        beforeWheel: function() {
                return true
          }}"
        >
          <div id="zoomable">
            <canvas id="c1"></canvas>
            <canvas id="c2"></canvas>
          </div>
          <div class="not-zoomable others">I am not zoomable</div>
        </panZoom>

Should become

        <panZoom
          height="100%"
          width="100%"
          ref="panZoom"
          selector="#zoomable"
          id="canvasContainer"
          :options="{   autocenter: true,
          bounds: false,
          minZoom: 0.5,
          maxZoom: 3,
          smoothScroll: false,
          transformOrigin: {x: 0, y: 0},
          zoomDoubleClickSpeed: 1,
          beforeWheel: beforeWheelHandler}"
        >
          <div id="zoomable">
            <canvas id="c1"></canvas>
            <canvas id="c2"></canvas>
          </div>
          <div class="not-zoomable others">I am not zoomable</div>
        </panZoom>

And then in your methods, create the beforeWheelHandler

methods: {
  beforeWheelHandler(e) {
    var shouldIgnore = !e.altKey;
    return shouldIgnore;
  }
}

You should also update the library to the latest version.