Scroll canvas in div

Improved version of: https://stackoverflow.com/a/36511409/2507142 -- Prevents scrolling to the right

by katalin_2003

HTML

<div id="canvasdiv" style="width: 100%; height: 250px; overflow: hidden">
	<canvas id="canvas" width="10000px" height="250px"></canvas>
</div>

CSS

body {
	padding: 2em 1em 0em 1em;
	margin: 0em;
}

#canvasdiv {
	border: 1px solid red;
}

#canvas {
	overscroll-behavior: contain;
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;

for (var i = 0; i < 1000; i++) {
	context.beginPath();
	context.arc(Math.random() * 10000, Math.random() * 250, Math.random() * 20.0, 0, 2 * Math.PI, false);
	context.stroke();
}

canvas.addEventListener('pointerdown', function(e) {
	var evt = e || event;
	dragging = true;
	lastX = evt.clientX;
	e.preventDefault();
}, false);


canvas.addEventListener('pointermove', function(e) {
	var evt = e || event;
	if (dragging) {

		var delta = evt.clientX - lastX;
		lastX = evt.clientX;

		// Revert margin if it's positive
		// We only want to scroll to the left
		if (canvas.style.marginLeft.slice(0, -2) > 0) {
			// Throttle reverting the margin
			setTimeout(function() {
				marginLeft = 0;
				canvas.style.marginLeft = '0px';
			}, 250);
			return;
		} else if (marginLeft > -9000) {
			marginLeft += delta;
			canvas.style.marginLeft = marginLeft + "px";
		}
	}
	e.preventDefault();
}, false);


canvas.addEventListener('pointerleave', function() {
	dragging = false;
}, false);


canvas.addEventListener('pointerup', function() {
	dragging = false;
}, false);