Drag To Move & Mouse Wheel To Zoom Library – wheel-zoom

Category: Image , Javascript , Zoom | March 15, 2020
Author: worka
Views Total: 455
Official Page: Go to website
Last Update: March 15, 2020
License: MIT


Drag To Move & Mouse Wheel To Zoom Library – wheel-zoom


wheel-zoom is a vanilla JavaScript zoom & pan library which applies drag to move and mouse wheel to zoom functionalities on the image within a container.

How to use it:

Import the wheel-zoom.js library into the HTML page.

<script src="wheel-zoom.js"></script>

Initialize the library on the image you specify.

jcWheelZoom = JcWheelZoom.create('img', {
  prepare: function (scale, correct_x, correct_y) {
    // do something when image prepared
  rescale: function (scale, correct_x, correct_y, min_scale) {
    // do something image rescaled

Re-init the library on window resize.

window.addEventListener('resize', function () {

Zoom in/out the image manually.


Enable/disable the drag to move functionality. Default: true.

jcWheelZoom = JcWheelZoom.create('img', {
  dragscrollable: false

Set the maximum allowed proportion of scale. Default: 1.

jcWheelZoom = JcWheelZoom.create('img', {
  max_scale: 1

Set the resizing speed. Default: 10.

jcWheelZoom = JcWheelZoom.create('img', {
  speed: 10


v4.0.0 (03/15/2020)

  • changed target dir

v3.2.0 (02/15/2020)

  • bugfix (mousewheel in FF)

You Might Be Interested In:

One thought on “Drag To Move & Mouse Wheel To Zoom Library – wheel-zoom

  1. Andrea

    Hi, Thanks for the library!
    With firefox using the mouse wheel I dont get the on image, working on chrome


Leave a Reply