关于figma中禁止用户触摸板进行缩放的实现？

Question

我在开发一款具有缩放功能的网页，但是如果用户使用触摸板等是可以对网页进行缩放的，这就导致了工具栏会位移到看不见的地方，我想知道类似于figma中是如何实现禁止缩放的

Answer 1

已经解决，触摸板触发的事件实际上是ctrl加+的操作，把对应的keyword禁用就可以了

  <script>
    document.addEventListener('mousewheel', function (e) {
      e = e || window.event;
      if ((e.wheelDelta && event.ctrlKey) || e.detail) {
        event.preventDefault();
      }
    }, {
      capture: false,
      passive: false
    });
  </script>

Answer 2

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

或者：

window.addEventListener('wheel', function(e){
    if(e.ctrlKey)
        e.preventDefault(); 
});

Answer 3

figma 也支持双指缩放的呀……

你是想问怎么控制只缩放指定元素、而不是整个 body 全都一起缩放了吗？

监听 pointerdown、pointermove、pointerup、pointercancel 等几个事件，自己处理缩放逻辑。另外记得在 pointermove 里 preventDefault 阻止默认事件就好了。