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.
