Javascript 如何使用鼠标滚轮实现缩放，如'；它是在典型的图形编辑器中完成的

几乎每个图形编辑器都允许使用Ctrl+鼠标滚轮缩放图像和“工作区背景”

棘手的部分是涉及到许多UI元素：

“工作区背景”-放大图像后较暗的区域

已正确更新的滚动条，可用于在工作区域周围平移

实际图像（蓝色蓝图图案）-视觉上缩放的元素

请注意，缩放行为因鼠标指针是否位于图像上方而不同：

• 如果它位于图像上方，则图像将被缩放和移动
• 如果它在“工作区域背景”之上，那么图像只会被缩放并保持其位置
• 注意：两种情况下滚动条都会更新

几十年前，它似乎得到了很好的实施

是否有任何具有类似“缩放+移动+滚动条”行为的开源项目可以查看其代码并从中学习

---

谢谢

触发器称为

车轮平衡

，您可以了解它

不要将滚轮事件与滚动事件混淆。默认值 控制盘事件的操作是特定于实现的，而不是 必须发送一个滚动事件

您所展示内容的一个实现将开始获取鼠标位置的当前位置，并使用它来放大/缩小容器大小。 缩放图像的特定部分时，屏幕上的“居中”效果是通过根据实际比例不断重新定位图像来实现的

滚动条对尺寸变化作出反应，因为它们有固定的宽度和高度，您可以看到它，因为放大或缩小不会改变“编辑器”尺寸