Use mouse wheel for page zoom, click and drag to pan the page

Question

How to use the mouse wheel to create scrolling and panning effects for the entire page? Basically just like any 2D editor, scroll to zoom and click and drag to pan, but for the entire body.

I can't find any information about it online.

Answer 1

If you don't know where to start, you'll quickly hit a wall because knowing where to start is the easy part. Here's a rough guide:

1. Add an event listener to the wheel event (Learn how](https://stackoverflow.com/a/51276012/104380))
2. Starting from the initial (current) zoom value, calculate the increment of wheel events and update %