html 图片滚轮放大缩小,出了点问题,谁帮忙看一下

效果是以鼠标为中心缩放图片,

不知道为什么,我写的这个每次缩放都会偏一点.

<body>

  <div class="content" >
    <div id="box" style="background-size: cover;" class="box" onmousewheel="zoom(event)" onclick="clic(event)"></div>
  </div>

</body>
<script>
  let scale = 1
  let width = 1000
  let height = 500
  let imagetop = 0
  let imageleft =0
  const box = document.querySelector('#box')
  function zoom(event) {
    let oldscale = scale
    if (event.deltaY > 0) {
      scale += 0.1
    } else {
      scale -= 0.1
    }
    
    box.style.width = `${width * scale}px`
    box.style.height = `${height * scale}px`
    box.pageX

    const offsetx = event.offsetX * (scale-oldscale)
    const offsety =event.offsetY *  (scale-oldscale)

    console.log(offsetx,offsety)
    box.style.top = `${imagetop -offsety}px`
    box.style.left = `${imageleft -offsetx}px`
    imagetop -=offsety
    imageleft-=offsetx
  }

  function clic(event){
    console.log(event.offsetX)
  }
</script>
<style>
  .content {
    height: 200px;
    width: 200px;
    overflow: hidden;
    position: relative;
  }

  .box {
    height: 500px;
    width: 1000px;
    background: url( https://s1.ax1x.com/2020/05/18/Yh0yi4.jpg);
    position: absolute;
  }
</style>

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/673084

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.