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

Category: Image , Javascript , Zoom | June 11, 2021
Author: worka
Views Total: 158 views
Official Page: Go to website
Last Update: June 11, 2021
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 or any HTML content within a container.

Zoom and pinch on touch screen devices are supported as well.

How to use it:

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

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

Initialize the library on the image or any HTML content you specify.

const myZoom = WZoom.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.

WZoom.create('img', {
  dragscrollable: false

Config the DragScrollable module.

WZoom.create('img', {
  dragScrollableOptions: {

    // smooth extinction moving element after set loose
    smoothExtinction: true,

    // after grabbing an element
    onGrab: function(){
      // do something

    // every tick when moving element
    onMove: function(){
      // do something

    // after after dropping an element
    onDrop: function(){
      // do something


Set the minimal/maximum allowed proportion of scale.

WZoom.create('img', {
  maxScale: 1,
  minScale: null

Set the resizing speed. Default: 10.

WZoom.create(element, {
  speed: 10

Determine the content type: image or html.

WZoom.create(element, {
  type: 'html'

Determine the height & width if you enabled HTML content type.

WZoom.create(element, {
  type: 'html',
  width: 2000,
  height: 1000

Determine whether to allow ‘Zoom On Click’. Default: true.

WZoom.create(element, {
  zoomOnClick: false


v6.6.1 (06/11/2021)

  • bugfix

v6.6.0 (04/22/2021)

  • support for zoom and pinch on touch screen devices

v6.5.1 (04/20/2021)

  • fixed mobile scrolling

v6.5.0 (03/16/2021)

  • target can be html element now

v6.4.1 (02/06/2021)

  • fix multiply init

v6.3.0 (11/12/2020)

  • refactoring and add support “hot” change src of image

v6.2.1 (11/07/2020)

  • bug fixed

v6.2.0 (09/12/2020)

  • added zoomOnClick option

v6.1.1 (09/05/2020)

  • Bugfix

v6.0.1 (06/20/2020)

  • Bugfix

v5.0.9 (06/20/2020)

  • Bugfix

v4.3.4 (06/06/2020)

  • Bugfix

v4.3.2 (05/30/2020)

  • DragScrollable supported touch

v4.2.0 (05/17/2020)

  • Added callbacks for DragScrollable module and soomth extinction at moving ended

v4.1.2 (05/09/2020)

  • restruct

v4.0.0 (03/15/2020)

  • changed target dir

v4.0.0 (03/15/2020)

  • changed target dir

v3.2.0 (02/15/2020)

  • bugfix (mousewheel in FF)

You Might Be Interested In:

2 thoughts 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

  2. Ardend

    It seems to only target HTML selectors, how can I target an element by class or ID?


Leave a Reply