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.

Related Posts

Cookie-Consent-Using-Bootstrap

How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…

Create-HTML-Terminals

Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…

Bootstrap-Alert-Bootbox

Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…

Slider-fg-carousel

An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….

Tags-Input-Component

A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…

copy-to-clipboard-javascript

A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…