vanilla javascript图像缩放滚动效果

const image = document.getElementById('image');

image.addEventListener('wheel', handleScroll);

function handleScroll(event) {
  event.preventDefault(); // 阻止默认滚动行为

  const delta = Math.sign(event.deltaY); // 获取滚轮滚动的方向（正数表示向上滚动，负数表示向下滚动）
  const scaleDelta = 0.1; // 缩放比例的增量

  let scale = parseFloat(image.style.transform.replace('scale(', '')) || 1; // 获取当前的缩放比例，默认为1
  scale += delta * scaleDelta; // 根据滚轮滚动方向和速度计算新的缩放比例

  // 设置图像元素的新缩放比例
  image.style.transform = `scale(${scale})`;
}