WH

Image Panning

Scrollbar Considerations

Many zooming libraries on npm offers the ability to pan images (translate images), after a large image has been zoomed in, however the majority of them do not take consideration of how the movement of the image affects the visibility of scrollbars.

Many of the panning libraries are expecting usage where the sole concentration is on the elements being panned without regards to its parent container scrollbars.

It is sometimes desirable to show scrollbars while panning comes up in image viewer or PDF viewer. The content in a "pannable" area permits movement of the image or page while preserving the scroll bars such as a pdf viewer. Viewers may also limit the range of panning movement.

One noteworthy library that addresses the scrollbar problem is D3. Chart interactivity usually implies zooming and panning and D3 does provide this functionality without the need to use extra packages.

Here is an example of this in play

https://jsfiddle.net/4rhvkc28/

adapted from this example

https://stackblitz.com/edit/d3-pan-and-zoom?file=index.js

to be usable in D3 v7.

While using a graphing library to implement panning behavior can be excessive, it is useful to know that this can be done if you have the ability to use D3 and that interactive user event customizations are made available and updated with D3 library updates.