JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contenitore">
<img src="http://www.art21.org/files/imagecache/full_image/images/mangold-art-1979-001-4distortedrectangles.jpg" usemap="#mappa" ondragstart="return false;" />
<map name="mappa">
    <area shape="rect" coords="30,90,140,240" alt="Verde" href="verde.htm" />
    <area shape="rect" coords="155,90,260,240" alt="Blu" href="blu.htm" />
    <area shape="rect" coords="280,90,390,240" alt="Beige" href="beige.htm"/>
    <area shape="rect" coords="410,90,510,240" alt="Arancio" href="arancio.htm"/>
</map>
</div>

CSS

#contenitore {width: 180px; height:312px; overflow-x:scroll; overflow-y:hidden;}

JavaScript

window.scroller = {scrolling: false, scrollLeft: 0, mouseLeft: 0};
document.getElementById("contenitore").addEventListener("mousedown", function(evt){
    window.scroller.scrollLeft = this.scrollLeft;
    window.scroller.mouseLeft = evt.clientX;
    window.scroller.scrolling = true;
});
document.body.addEventListener("mouseup", function(){
    window.scroller.scrolling = false;
});
document.body.addEventListener("click", function(evt){
    if ((Math.abs(window.scroller.mouseLeft - evt.clientX) > 8)){
        evt.preventDefault();
        return false;
    }

});
document.body.addEventListener("mousemove", function(evt){
    if (window.scroller.scrolling){
        document.getElementById("contenitore").scrollLeft = window.scroller.scrollLeft + window.scroller.mouseLeft - evt.clientX;
    }
});