middle-button-scroll.js

(function () {
    var is_scrolling = false,
        start_x, start_y,
        shift_x, shift_y,
        delta_x, delta_y,
        overlay;

    var SPACE       = 20,
        MAX_SPACE_X = 300,
        MAX_SPACE_Y = 200;

    // =========================================================================

    function start(_e) {
        is_scrolling = true;

        start_x = _e.clientX;
        start_y = _e.clientY;

        shift_x = 0;
        shift_y = 0;
        delta_x = 0;
        delta_y = 0;

        overlay = document.createElement('DIV');
        overlay.style.position = 'fixed';
        overlay.style.top      = '0px';
        overlay.style.left     = '0px';
        overlay.style.right    = '0px';
        overlay.style.bottom   = '0px';
        overlay.style.zIndex   = '99999999';
        document.body.appendChild(overlay);

        setCursor('move');

        document.addEventListener('mousemove', documentMouseMoveHandler, false);

        scroll();
    }

    // =========================================================================

    function stop(_e) {
        is_scrolling = false;

        overlay.parentNode.removeChild(overlay);

        document.removeEventListener('mousemove', documentMouseMoveHandler, false);

        setCursor('auto');
    }

    // =========================================================================

    function scroll() {
        if ( !is_scrolling ) {
            return;
        }

        window.scrollTo(window.scrollX + shift_x * delta_x,
                            window.scrollY + shift_y * delta_y);

        requestAnimationFrame(scroll);
    }

    // =========================================================================

    function documentMouseDownHandler(_e) {
        if ( is_scrolling ) {
            stop();

            return false;
        }

        if ( _e.which !== 2 ) {
            return;
        }

        if ( !is_scrolling ) {
            start(_e);
        }
        else {
            stop(_e);
        }

        return false;
    }

    // =========================================================================

    function documentMouseMoveHandler(_e) {
        shift_x = 0;
        shift_y = 0;

        if ( _e.clientY > start_y + SPACE && _e.clientX > start_x + SPACE ) {
            setCursor('se-resize');

            shift_x = 1;
            shift_y = 1;
        }
        else if ( _e.clientY > start_y + SPACE && _e.clientX < start_x - SPACE ) {
            setCursor('sw-resize');

            shift_x = -1;
            shift_y =  1;
        }
        else if ( _e.clientY < start_y - SPACE && _e.clientX > start_x + SPACE ) {
            setCursor('ne-resize');

            shift_x =  1;
            shift_y = -1;
        }
        else if ( _e.clientY < start_y - SPACE && _e.clientX < start_x - SPACE ) {
            setCursor('nw-resize');

            shift_x = -1;
            shift_y = -1;
        }
        else if (_e.clientY > start_y + SPACE) {
            setCursor('n-resize');

            shift_y = 1;
        }
        else if (_e.clientY < start_y - SPACE) {
            setCursor('s-resize');

            shift_y = -1;
        }
        else if (_e.clientX < start_x - SPACE) {
            setCursor('w-resize');

            shift_x = -1;
        }
        else if (_e.clientX > start_x + SPACE) {
            setCursor('e-resize');

            shift_x = 1;
        }
        else {
            setCursor('move');
        }

        delta_x = Math.abs(_e.clientX - start_x);
        delta_y = Math.abs(_e.clientY - start_y);

        if ( delta_x > MAX_SPACE_X ) {
            delta_x = MAX_SPACE_X;
        }

        if ( delta_x < SPACE ) {
            delta_x = 0;
        }

        if ( delta_y > MAX_SPACE_Y ) {
            delta_y = MAX_SPACE_Y;
        }

        if ( delta_y < SPACE ) {
            delta_y = 0;
        }

        delta_x = 100 / MAX_SPACE_X * delta_x / 5;
        delta_y = 100 / MAX_SPACE_Y * delta_y / 2;
    }

    // =========================================================================

    function setCursor(_res) {
        document.body.style.cursor = _res;
    }

    // =========================================================================

    document.addEventListener('mousedown', documentMouseDownHandler, false);
}());