Press "Enter" to skip to content

Vanilla Javascript Function (ES6) Enables Desktop Scrolling | LC-Mouse-Drag

Drag-n-scroll also on desktop machines, by means of LCweb is a vanilla javascript function to implement an easy scroll drag effect with the desktop mouse. A small JavaScript image library that provides seamless dragging functionality on images.

image panning on mouse move, zoom pan the image on hover & mouse move, javascript pan zoom image, zoom the image on hover & mouse move, js image zoom library

  • Optionally set a smooth, mobile-like drag animation at the end of the swipe
  • Optionally, you can only control one scroll axis

How to make use of it:

1. Import the lc-mouse-drag.js JavaScript library into the doc.

<script src="lc-mouse-drag.js"></script>

2. Initialize the library on the picture container as follows:

<div id="inner">
  <img src="demo.webp" />
</div>
lc_mouseDrag('#inner');

3. Determine the animation delta when ending dragging.

lc_mouseDrag('#inner', 0);

4. Disable X-axis and/or Y-axis dragging.

lc_mouseDrag('#inner', 0, true, false);

5. Important CSS rules for desktop.

body:not(.lc_mousedrag_is_mobile) #inner {
  overflow: hidden;
  cursor: grab;
}

Minimal Image Panning Library, LC-Mouse-Drag Plugin/Github, html image panning, zoom and pan image css


See Demo And Download

Official Website(LCweb-ita): Click Here

This superior jQuery/javascript plugin is developed by LCweb-ita. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.