使用鼠标滚轮进行页面缩放，点击并拖动以平移页面

Question

如何使用鼠标滚轮为整个页面制作滚动和平移效果？基本上就像任何 2D 编辑器一样，通过滚动进行缩放，单击并拖动进行平移，但适用于整个主体。

我在网上找不到任何有关它的信息。

Answer 1

如果您不知道从哪里开始，您很快就会碰壁，因为知道从哪里开始是最容易的部分。这是一个粗略的指南：

1. 将事件侦听器添加到 wheel 事件（了解操作方法](https://stackoverflow.com/a/51276012/104380))
2. 从初始（当前）zoom 值开始，计算轮子事件的增量并更新您的 zoom 值。
3. 使用 zoom 值以某种形式操纵页面的比例。您可以在 body 元素上使用 CSS transform:scale() 来实现此目的。
4. 为 mousemove 事件添加事件侦听器（了解操作方法](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event))
5. 根据检测到的鼠标移动采取行动，并计算需要平移缩放的 body 元素多少才能到达 4 个边缘中的任何一个，而不是超出。 平移可以通过 CSS transform:translate(x, y)