Drag element to scroll

dragToScroll.js

(function () {
	"use strict";

	jQuery.fn.extend({
		dragToScroll({ horizontal = true, vertical = true } = {}) {
			const position = { top: 0, left: 0, x: 0, y: 0 };

			const element = this.get(0);

			function downHandler({ clientX, clientY }) {
				Object.assign(position, {
					top: element.scrollTop,
					left: element.scrollLeft,
					x: clientX,
					y: clientY
				});

				$(document)
					.on("mousemove.drag-to-scroll", moveHandler)
					.one("mouseup blur", upHandler);
			}

			function moveHandler({ clientX, clientY }) {
				if (horizontal) {
					const dx = clientX - position.x;
					element.scrollLeft = position.left - dx;
				}
				if (vertical) {
					const dy = clientY - position.y;
					element.scrollTop = position.top - dy;
				}
			}

			function upHandler() {
				$(document).off(".drag-to-scroll");
			}

			this.on("mousedown", downHandler);

			return this;
		}
	});
})();