JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ToolBar">
	<div id="modes"><span class="active">Outil main</span><span>Zoom au scroll</span></div>
	<div id="zoom"><span data-zoom="+"></span><span data-zoom="-"></span><input type="number"></div>
</div>

<div id="Main" class="canMove">
	<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero vitae tortor ullamcorper lacinia quis at ante. Sed sollicitudin laoreet elit, sed pulvinar libero dapibus in. Nam accumsan sit amet massa at blandit. Nam luctus enim ac lacinia volutpat. Morbi aliquam ligula quis ex condimentum volutpat. Quisque faucibus nec mi non mattis. Mauris mattis magna nec gravida consequat. Maecenas sed dolor nibh. Pellentesque sagittis dictum tincidunt. Proin tellus eros, ultrices aliquam dignissim sed, auctor et odio. Sed eu aliquam ex.

In hac habitasse platea dictumst. Etiam vitae neque scelerisque, bibendum dui et, suscipit nulla. Morbi quis nibh vel mi porta interdum eget ac quam. Vestibulum maximus diam augue, quis suscipit nulla elementum et. Etiam cursus pharetra sapien, ut consequat sem hendrerit eget. Integer varius porttitor pulvinar. Fusce ac vulputate tortor, id tempor dolor. Suspendisse dignissim facilisis quam eget varius. Maecenas rutrum orci sed nibh lobortis, ut maximus enim convallis.

Cras gravida, dui at vestibulum mollis, ante dolor volutpat mauris, vitae sollicitudin enim nibh et nisl. Vestibulum accumsan cursus tellus in iaculis. In hac habitasse platea dictumst. Cras mattis nulla est, eu bibendum ante laoreet in. Nam rhoncus malesuada purus, eleifend auctor purus mattis et. Quisque posuere lorem lacus, a pretium felis placerat ac. Etiam sit amet turpis pharetra, tempus magna at, posuere sapien. Sed suscipit mollis massa id ultrices. Nulla neque arcu, pellentesque at ultrices sit amet, ultricies sit amet lacus. Etiam tempor dui in pulvinar molestie. Suspendisse in suscipit neque. Etiam semper aliquam tortor, a hendrerit arcu bibendum id. Donec eu imperdiet orci. Donec eros ipsum, iaculis porta...

CSS

html, body {margin: 0;background: #333;}

#Main {position: absolute;width: 2000px;height: 3500px;padding: 20px;padding-top: 60px;font: 1em/1.5 sans-serif;color: #fff;}
#Main {-moz-columns:400px;-webkit-columns:400px;columns:400px;}
#Main.canMove {cursor: -moz-grab;cursor: -webkit-grab;cursor: grab;}
#Main.inMove {cursor: -moz-grabbing;cursor: -webkit-grabbing;cursor: grabbing;}

#ToolBar {position: fixed;top: 0;right: 0;left: 0;height: 40px;font: 700 1em/40px sans-serif;color: #fff;background: #1f1f1f;background: rgba(31,31,31,.85);z-index: 1000;}
#ToolBar>div {display: inline-block;vertical-align: top;}
#ToolBar span {background: #4a4a4a;cursor: pointer;transition:background .4s ease;}
#ToolBar span:hover {background: #616161;}

#modes span {display: inline-block;margin-left: 5px;padding: 0 15px;line-height: 30px;border-radius: 3px;}
#modes span.active {height: 28px;border:3px inset #000;}

#zoom {float: right;}
#zoom span {display: inline-block;vertical-align: top;width: 60px;margin-right: 1px;text-align: center;}
#zoom span:before {content: attr(data-zoom);}
#zoom input {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width: 100px;height: 40px;}

JavaScript

function addEvent(a,b,c,d){(a.addEventListener)?a.addEventListener(b,c,d||!1):a.attachEvent("on"+b,c);}
function removeEvent(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d||!1):a.detachEvent("on"+b, c);}

function endMove(){

	main.className = "canMove";
	
	removeEvent(document, "mousemove", doMove);
	removeEvent(document, "mouseup", endMove);

}

function doMove(e){
	
	var dX = initialClickX - e.clientX,
		dY = initialClickY - e.clientY;

	window.scrollTo(initialScrollX + dX, initialScrollY + dY);

}

function initMove(e){
	
	if (!outilMain) return;

	e.preventDefault ? e.preventDefault() : (e.returnValue = false);

	main.className = "inMove";

	initialScrollX = window.pageXOffset || document.documentElement.scrollLeft;
	initialScrollY = window.pageYOffset || document.documentElement.scrollTop;

	initialClickX = e.clientX;
	initialClickY = e.clientY;

	addEvent(document, "mousemove", doMove);
	addEvent(document, "mouseup", endMove);

}

function doZoom(d){

	actualZoom += deltaZoom * d;
	actualZoom < deltaZoom && (actualZoom = deltaZoom);

	main.style[transform] = "scale("+actualZoom+")";

	zoomInput.value = parseInt(actualZoom * 100);	
	
}

function doZoomIn(){
	
	doZoom(1);

}

function doZoomOut(){

	doZoom(-1);

}

function changeManualZoom(){
	
	actualZoom = parseInt(zoomInput.value)/100;
	main.style[transform] = "scale("+actualZoom+")";

}

function zoomWithScroll(e){
	
	if (!zoomAuScroll) return;

	e.stopPropagation ? e.stopPropagation() : e.cancelBubble;
	e.preventDefault ? e.preventDefault() : (e.returnValue = false);

	var zoomUp = e.detail < 0 || e.wheelDelta > 0;

	doZoom(zoomUp ? 1 : -1);

}

function modeMain(){
	
	outilMain = outilMain ? false : true;
	btnMain.className = outilMain ? "active" : "";
	main.className = outilMain ? "canMove" : "";

}

function modeZoom(){
	
	zoomAuScroll = zoomAuScroll ? false : true;
	btnZoom.className = zoomAuScroll ? "active" : "";

}

var transform;

if ("transform" in document.body.style)...