<!-- Generated by SpecStory -->

# Auto Center Image on Scale Down (2025-05-26 17:12:32)

_**User**_

TransformWrapper 需要在缩放比 <=1 时自动让图片中心归位

---

_**Assistant**_

我来帮你修改 `TransformWrapper` 的配置，让它在缩放比例小于等于1时自动让图片中心归位。

---



---

完成！我在 `onTransformed` 回调函数中添加了逻辑，当缩放比例小于等于1时，会自动调用 `ref.centerView(1, 200)` 方法让图片回到中心位置。

这里的参数含义：
- 第一个参数 `1` 是目标缩放比例
- 第二个参数 `200` 是动画持续时间（毫秒）

这样当用户缩小图片到原始大小或更小时，图片会平滑地回到中心位置，提供更好的用户体验。

---

_**User**_

 这里需要让 wheel 事件映射到 横向滚动

---

_**Assistant**_

我来帮你添加 wheel 事件映射到横向滚动的功能。需要在 `GalleryThumbnail` 组件中添加鼠标滚轮事件处理。

---

Read file: src/components/photo-viewer/GalleryThumbnail.tsx

---

现在我来添加 wheel 事件处理，让鼠标滚轮能够横向滚动缩略图容器：

---



---

完成！我已经为缩略图容器添加了鼠标滚轮事件处理。现在当用户在缩略图区域使用滚轮时：

1. **阻止默认行为**：`e.preventDefault()` 阻止页面的垂直滚动
2. **转换滚动方向**：将 `e.deltaY`（垂直滚动量）映射到 `scrollLeft`（横向滚动）
3. **被动监听**：使用 `{ passive: false }` 确保可以调用 `preventDefault()`

这样用户就可以通过鼠标滚轮在缩略图栏中进行横向滚动，提供更好的用户体验。

---

