滚轮（触摸板）缩放指定区域

发表于 | 更新于 | 分类于

MDN - Element: wheel event;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function zoom(event) {
  // 缩放的时候 event.ctrlKey 为 true, 否则认为是滚动
  if (!event.ctrlKey) {
    return;
  }
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);

  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector('div');
el.onwheel = zoom;

Example

通过触摸板双指缩放，或者按住 Ctrl 滚动滚轮

0%