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

Question

How would I go about making a scroll-and-pan effect with the mouse wheel for the entire page? Basically like any 2D editor with the scroll to zoom, click and drag to pan but for the entire body.

I haven't been able to find anything online about it.

Answer 1

If you don't know where to start, you will very soon hit another wall, because knowing where to start is the easy part. Here is a rough guide:

1. Add event listener to the wheel event (learn how]( https://stackoverflow.com/a/51276012/104380 ))
2. Start with an initial (current) zoom value and calculate the delta from the wheel event and update your zoom value.
3. Use the zoom value to manipulate the scale of the page in some form. You can use CSS transform: scale() for that, on the body element.
4. Add event listener for the mousemove event (learn how]( https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event ))
5. Act upon the detected mouse move, and calculate how much you need to pan the zoomed body element in order to reach any of the 4 edges, and not beyond. panning may be done via CSS transform: translate(x,y)