JSFiddle - React, Tailwind, and code Playground

by diondirza

HTML

<div id="container">
    <div>TITLE</div>
    <div class="detail-content">
        <img src="http://www.austinlehman.com/filebin/images/tripPhotos/rocky_mountain_tours.jpg" />
    </div>
    <div>FOOTER</div>
</div>

CSS

.detail-content {
    border:1px solid green;
    background: none;
    display: block;
    left: 0;
    min-height: 1000px;
    overflow: auto;
    padding: 5px 5px 5px 5px;
    width: 400px;
}
html.block-selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JavaScript

var clicked = false,
    clickY;
$(document).on({
    'mousemove': function (e) {
        clicked && updateScrollPos(e);
    },
        'mousedown': function (e) {
        clicked = true;
        clickY = e.pageY;
        $('html').addClass('block-selection').css('cursor', 'move');
    },
        'mouseup': function () {
        clicked = false;
        $('html').removeClass('block-selection').css('cursor', 'auto');
    }
});

var updateScrollPos = function (e) {
    $(window).scrollTop($(window).scrollTop() + (clickY - e.pageY));
}

$(document).ready(function () {
    $('img').on('dragstart', function (event) {
        event.preventDefault();
    });
});