document.addEventListener('DOMContentLoaded', () => {

	let scrollBox = null;
	let pos = {
		top: 0,
		left: 0,
		x: 0,
		y: 0,
	};

	const mouseDownHandler = function (event) {
		scrollBox = event.target.closest('.scrolled-list');
		if (!scrollBox) {
			return;
		}
		scrollBox.style.cursor = 'grabbing';
		scrollBox.style.userSelect = 'none';

		pos = {
			// The current scroll
			left: scrollBox.scrollLeft,
			top: scrollBox.scrollTop,
			// Get the current mouse position
			x: event.clientX,
			y: event.clientY,
		};

		document.addEventListener('mousemove', mouseMoveHandler);
		document.addEventListener('mouseup', mouseUpHandler);
	};

	const mouseMoveHandler = function (event) {
		// How far the mouse has been moved
		const dx = event.clientX - pos.x;
		const dy = event.clientY - pos.y;

		// Scroll the element
		scrollBox.scrollTop = pos.top - dy;
		scrollBox.scrollLeft = pos.left - dx;
	};

	const mouseUpHandler = function () {
		document.removeEventListener('mousemove', mouseMoveHandler);
		document.removeEventListener('mouseup', mouseUpHandler);

		scrollBox.style.cursor = 'grab';
		scrollBox.style.removeProperty('user-select');
	};
	document.addEventListener('mousedown', mouseDownHandler);

});