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

Question

Wie erstelle ich mit dem Mausrad Scroll- und Schwenkeffekte für die gesamte Seite? 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 darüber finden.

P粉466643318 · Answer

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

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