鼠标点缩放图像-滚轮事件

Question

这是缩放工作示例。我希望图像在图像上的实际鼠标位置上放大。如何实现这一目标？没有图书馆。

const image = document.querySelector('img');

const zoom = {

    min: 1,

    max: 3,

    value: 1,

    step: 0.1

};

image.addEventListener('wheel', event => {

   event.preventDefault();

   if (event.deltaY < 0) {

     zoom.value = zoom.value >= zoom.max ? zoom.max : zoom.value + zoom.step;

     

     } else  if (event.deltaY > 0) {

      zoom.value = zoom.value <= zoom.min ? zoom.min : zoom.value - zoom.step;

   }

  

  image.style.transform = `scale(${zoom.value})`

  }

)

div {

  width: 500px;

  overflow: hidden;

}

img {

  width: 100%;

}

<div>

  <img src="https://picjumbo.com/wp-content/uploads/free-stock-photos-san-francisco-1080x720.jpg">

</div>