JSFiddle - React, Tailwind, and code Playground

by John Schulz

HTML

<div class="frame">
    <div class="keyhole">
        <div class="canvas">
            <div class="scroller">
            Alskdfja sfdja ;sdfa ;sklf a;sdf ja;sdf asfaf asdf;als falsf ;alskf d;alsk fd;als fd;als f;as fa;s fa;s fas fa; sfd;a sfdl as;fa;sfd a;s fd lsdflk as;dlfk a;slfka;lsdf ;laksfjlaksflaksdf;laksdf asdf;as dfalskdfj  alskdf ;alskdf ;laskdf ;als dfk;asdflkasdfk fasdfa;s df ASDFSADF asDFASDF asdfASDFASDF asdfASDFASDF asdf             Alskdfja sfdja ;sdfa ;sklf a;sdf ja;sdf asfaf asdf;als falsf ;alskf d;alsk fd;als fd;als f;as fa;s fa;s fas fa; sfd;a sfdl as;fa;sfd a;s fd lsdflk as;dlfk a;slfka;lsdf ;laksfjlaksflaksdf;laksdf asdf;as dfalskdfj  alskdf ;alskdf ;laskdf ;als dfk;asdflkasdfk fasdfa;s df ASDFSADF asDFASDF asdfASDFASDF asdfASDFASDF asdf 
            Alskdfja sfdja ;sdfa ;sklf a;sdf ja;sdf asfaf asdf;als falsf ;alskf d;alsk fd;als fd;als f;as fa;s fa;s fas fa; sfd;a sfdl as;fa;sfd a;s fd lsdflk as;dlfk a;slfka;lsdf ;laksfjlaksflaksdf;laksdf asdf;as dfalskdfj  alskdf ;alskdf ;laskdf ;als dfk;asdflkasdfk fasdfa;s df ASDFSADF asDFASDF asdfASDFASDF asdfASDFASDF asdf 
            Alskdfja sfdja ;sdfa ;sklf a;sdf ja;sdf asfaf asdf;als falsf ;alskf d;alsk fd;als fd;als f;as fa;s fa;s fas fa; sfd;a sfdl as;fa;sfd a;s fd lsdflk as;dlfk a;slfka;lsdf ;laksfjlaksflaksdf;laksdf asdf;as dfalskdfj  alskdf ;alskdf ;laskdf ;als dfk;asdflkasdfk fasdfa;s df ASDFSADF asDFASDF asdfASDFASDF asdfASDFASDF asdf 
            </div>
        </div>
    </div>
</div>

CSS

.frame { 
    outline: 1px solid black; 
    padding: 0 5px;
}

.keyhole {
    border-radius: 25px;
    box-shadow: 0px 0px 3px #000000;
    -webkit-box-shadow: 0px 0px 3px #000000;
    background-color: green;
    padding: 0;
    border: none;
    overflow: hidden;
    white-space: nowrap;
}

.canvas {
    height: 50px;
    display: table-cell;
    vertical-align: middle;
}

.scroller {
    position: relative;
    left: -50em;
}

JavaScript

var MOUSE_DOWN = false;
var $scroller = $('.scroller');
var DOWN_X;

function onMouseDown(event) {
    if (event.which !== 1) return;
    MOUSE_DOWN = true;
    DOWN_X = event.x || event.pageX;
    SCROLLER_LEFT = ~~($scroller.css('left').replace(/[^\d]+$/, ''));
}

function onMouseUp(event) {
    MOUSE_DOWN = false;
    DOWN_X = 0;
}

function onMouseMove(event) {
    var xCurr = event.x || event.pageX;
    var xDiff;
    var xNew;

    if (MOUSE_DOWN) {
        xDiff = xCurr - DOWN_X;
        xNew = (SCROLLER_LEFT + xDiff) + 'px';
        $scroller.css('left', xNew);
    }
}

$(document).bind('mousedown', onMouseDown, false).bind('mouseup', onMouseUp, false).bind('mousemove', onMouseMove, false);