触控板移动和缩放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>移动和缩放示例</title>
  <style>
    body {
      margin: 0;
    }
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 500px;
      background-color: #a8b1f4;
      overflow: hidden;
    }
    .inner {
      background-color: #faf8a3;
      width: 180px;
      height: 320px;
    }
    .tip p {
      margin-bottom: 0;
      padding-left: 20px;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <div class="inner"></div>
</div>
<div class="tip">
  <p>要体验元素移动、收缩效果请按如下提示操作:</p>
  <p>1、触控板：双指轻抚、双指收缩和放大，</p>
  <p>2、鼠标：滑动滚轮、按住ctrl键再滑动滚轮</p>
</div>
<script>
  (() => {
    const wrapper = document.querySelector('.wrapper')
    const inner = wrapper.querySelector('.inner')
    let offset = { x: 0, y: 0 }
    let scale = 1
    wrapper.addEventListener('mousewheel', e => {
      e.preventDefault()
      let deltaX = 0, deltaY = 0
      deltaX = e.deltaX
      // if (e.deltaX < 0) { console.log('向左') }
      // if (e.deltaX > 0) { console.log('向右') }
      if (e.ctrlKey) {
        if (e.deltaY > 0) {
          // console.log('向内')
          if (scale <= 0.5) {
            scale = 0.5
          } else {
            scale -= 0.05
          }
        }
        if (e.deltaY < 0) {
          // console.log('向外')
          if (scale >= 3) {
            scale = 3
          } else {
            scale += 0.05
          }
        }
      } else {
        deltaY = e.deltaY
        // if (e.deltaY > 0) { console.log('向下') }
        // if (e.deltaY < 0) { console.log('向上') }
      }
      offset = {
        x: offset.x - deltaX,
        y: offset.y - deltaY
      }
      inner.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offset.x}, ${offset.y})`
    })
  })()
</script>
</body>
</html>
@move-scale.html
代码：

效果：
