Skip to content

Instantly share code, notes, and snippets.

@justdanpo
Last active February 12, 2024 19:44
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save justdanpo/8091e3a2345b0dd6ac54a4a8b06649f8 to your computer and use it in GitHub Desktop.
Drag To Scroll Image
// ==UserScript==
// @name Drag To Scroll Image
// @namespace https://gist.github.com/justdanpo
// @version 0.4
// @description Drag To Scroll Image
// @author den_po
// @match http://*/*
// @match https://*/*
// @match file://*
// @grant none
// ==/UserScript==
(function () {
const imgs = document.getElementsByTagName("IMG")
if (imgs && imgs.length && (imgs[0].src == document.URL)) {
let img = imgs[0]
let isDragging, oldX, oldY
function onMove(evt) {
isDragging = true
img.style.cursor = "move"
scroll(oldX - evt.clientX, oldY - evt.clientY)
evt.preventDefault()
evt.stopPropagation()
}
function onClick(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
const rect = document.body.getClientRects()[0]
oldX = evt.clientX - rect.x
oldY = evt.clientY - rect.y
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