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

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

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

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

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 进行缩放。工具栏始终可见，用户体验也相应得到提升。

以上就是如何像 Figma 一样禁用触摸板缩放？的详细内容，更多请关注其它相关文章！