Verwenden Sie das Mausrad zum Zoomen der Seite und klicken und ziehen Sie, um die Seite zu verschieben

Question

Wie verwende ich das Mausrad, um Scroll- und Schwenkeffekte für die gesamte Seite zu erstellen? Im Prinzip wie bei jedem 2D-Editor: Scrollen Sie zum Zoomen und klicken und ziehen Sie zum Schwenken, aber für den gesamten Körper.

Ich kann online keine Informationen dazu finden.

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)