如何像 figma 一样禁用触摸板缩放？

在网页设计中，缩放功能固然重要，但当用户使用触摸板时却可能带来 unintended consequences。以 figma 为例，缩放功能被巧妙地禁止，保证了工具栏始终可见。

如何实现这项功能呢？让我们深入探究：

度加AI

度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。

下载

figma 的做法是拦截触摸板触发的特定事件，实际上是与 ctrl + 键相对应的操作。通过识别并禁用此关键事件，触摸板缩放便被禁止。

下面是一段 javascript 代码，可以实现类似的功能：

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

通过运行此代码，你可以有效地阻止用户使用触摸板上方的 two-finger gesture 进行缩放。工具栏始终可见，用户体验也相应得到提升。