Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Drag To Scroll Image
// ==UserScript==
// @name Drag To Scroll Image
// @namespace https://gist.github.com/justdanpo
// @version 0.3
// @description Drag To Scroll Image
// @author den_po
// @match http://*/*
// @match https://*/*
// @match file://*
// @grant none
// ==/UserScript==
(function() {
var imgs = document.getElementsByTagName("IMG");
if (imgs && imgs.length && (imgs[0].src == document.URL)) {
var img = imgs[0];
var isDragging, oldX, oldY;
var onMove = function(evt) {
isDragging = true;
img.style.cursor = "move";
document.body.scrollTop = oldY - evt.clientY;
document.body.scrollLeft = oldX - evt.clientX;
evt.preventDefault();
evt.stopPropagation();
};
var onClick = function(evt) {
if (0 === evt.button) {
if (isDragging) {
evt.preventDefault();
evt.stopPropagation();
img.style.cursor = "zoom-out";
}
removeEventListener('mousemove', onMove, false);
removeEventListener('click', onClick, true);
}
};
addEventListener('mousedown', function(evt) {
if (0 === evt.button) {
if ((document.body.clientHeight < img.height) || (document.body.clientWidth < img.width))
if ((evt.clientY < document.body.clientHeight) && (evt.clientX < document.body.clientWidth)) {
isDragging = false;
oldX = evt.clientX + document.body.scrollLeft;
oldY = evt.clientY + document.body.scrollTop;
addEventListener('mousemove', onMove, false);
addEventListener('click', onClick, true);
}
}
}, false);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.