用wheel事件实现滚轮缩放需监听容器、阻止默认行为、计算鼠标局部坐标并动态调整scale与translate偏移，配合transform-origin和范围限制确保光标位置不变且无跳动。
用 wheel 事件实现滚轮缩放，核心是监听鼠标滚轮、计算缩放中心点、更新缩放比例并调整视图偏移，避免图像“跳动”。关键不是只改缩放值，而是同步修正容器的 transform: scale() 和 translate()。
监听 wheel 并阻止默认行为
滚轮默认会触发页面滚动或缩放（如浏览器 Ctrl+滚轮），必须调用 event.preventDefault() 阻止。同时建议用 passive: false 显式声明，确保可取消：
- 在目标元素（如图片容器）上添加监听器：
container.addEventListener('wheel', handleWheel, { passive: false }) -
handleWheel中第一行写event.preventDefault()，否则缩放可能失效或触发页面滚动 - 不要监听
document或window—— 容易误触，且无法精准获取相对于容器的坐标
计算缩放中心点（关键！）
用户希望“光标所在位置保持不动”地缩放，这就需要把鼠标相对于容器的位置转为缩放前后的偏移补偿。步骤如下：
- 用
event.clientX / clientY减去容器getBoundingClientRect()的左/上边距，得到鼠标在容器内的局部坐标(x, y) - 设当前缩放为
scale，目标缩放为scale * delta（delta通常取1.1或0.9，由event.deltaY符号决定） - 缩放后，原坐标
(x, y)在新缩放下会“漂移”到(x * delta, y * delta)；为抵消该漂移，需反向平移：newTranslateX = translateX + x - x * deltanewTranslateY = translateY + y - y * delta
应用 transform 实现平滑缩放
推荐用 CSS transform（而非修改 width/height），性能好且支持硬件加速：
- 容器设
transform-origin: 0 0（配合左上为原点的平移逻辑），或直接用transform: scale(s) translate(x, y)组合 - 每次缩放后，更新两个状态：当前
scale和当前translate偏移量（保存为实例变量或 ref） - 注意限制缩放范围（如
minScale = 0.5,maxScale = 4），并在超出时截断，避免数值溢出或失控 - 可加
transform: scale(...) translate(...) transition: transform 0.1s实现轻微缓动（但频繁滚轮下慎用，可能卡顿）
补充细节与常见问题
实际落地时容易忽略这些：
-
不要直接用
event.deltaY做缩放因子——它的值因设备（Mac 触控板 vs 普通鼠标）差异极大，应归一化：例如const delta = event.deltaY > 0 ? 0.9 : 1.1 - 容器需设
overflow: hidden，否则缩放后内容溢出可见，影响体验 - 若容器有内边距（
padding）或边框（border），getBoundingClientRect()已包含它们，无需额外减去 - 移动端不触发
wheel，需另配touchstart/touchmove双指缩放（不属于本题范围）
