JavaScript中监听wheel事件可实现以鼠标位置为中心的页面缩放：阻止默认行为，按ctrlKey触发，用deltaY判断方向，通过transform:scale()与动态transform-origin实现平滑缩放。
在 JavaScript 中监听鼠标滚轮事件实现页面缩放，核心是捕获 wheel 事件，阻止默认滚动行为，并根据滚轮方向动态调整 transform: scale() 或视口缩放（如 meta viewport），同时注意保持缩放中心点（通常是鼠标位置）不变，避免页面“偏移”。
监听 wheel 事件并阻止默认行为
滚轮事件默认会触发页面上下滚动，缩放前必须调用 event.preventDefault()。推荐使用现代标准的 wheel 事件（替代已废弃的 mousewheel 和 DOMMouseScroll）：
- 绑定到目标元素（如
document或某个容器），监听wheel - 通过
event.deltaY判断滚动方向：负值为向上（缩放放大），正值为向下（缩放缩小） - 建议用
event.ctrlKey做条件判断，仅在按住 Ctrl 键时触发缩放，避免误操作
基于 CSS transform 实现平滑缩放（推荐）
对页面主体容器（如 <body> 或一个包裹所有内容的 <div id="viewport">）应用 transform: scale()，并配合 transform-origin 精确控制缩放中心点（通常设为鼠标坐标）：
- 记录鼠标相对于容器的坐标：
const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; - 设置
container.style.transformOrigin = `${x}px ${y}px`，确保缩放围绕鼠标点发生 - 用
scale *= (e.deltaY 控制缩放比例（系数可调），限制最小/最大值（如 0.5–2.0） - 更新样式：
container.style.transform = `scale(${scale})`
处理缩放后的布局与交互适配
单纯缩放元素会导致点击区域、滚动条、字体渲染等异常，需同步调整：
立即学习“Java免费学习笔记（深入）”；
- 将缩放容器设为
position: relative，内部元素避免使用固定px定位，多用百分比或rem - 禁用原生双击缩放（移动端）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> - 重置鼠标指针样式（如
cursor: zoom-in / zoom-out）提升反馈感 - 缩放后重新计算并更新容器尺寸，必要时触发
resize自定义事件供其他模块响应
补充：重置缩放与键盘快捷键支持
提供良好的用户体验需配套重置功能：
- 监听
Ctrl + 0快捷键恢复原始缩放（scale = 1） - 添加按钮或右键菜单选项：“重置缩放”
- 将当前缩放值存入
localStorage，刷新后自动还原 - 缩放过程中临时禁用
overflow: hidden外层容器的滚动，防止缩放抖动
