Scrolling without scrollbars

This is a neat way of how to create a "scrollbox", i.e. an area where you can inster stuff to be scrolled, but without using scrollbars - using buttons instead.

by bizamajig

HTML

<!--
    This shows one way of doing vertical and horizontal scrolling, without the need for
    scroll bars.
-->
<p>
    <h1>Vertical scrolling again</h1>
    <button class="scroll up"       value="vert"    >^</button>
    <button class="scroll vertical" value="vert  Ev">E</button> <button class="scroll vertical" value="vert Fv">F</button>
    <div id="vert">
        <div>  <!-- THIS DIV IS THE CONTAINER THAT IS ANIMATED -->
            <div id="Ev"> EEEEEEE text EEEEEEE </div>
            <div id="Fv"> FFFFFFF text FFFFFFF </div>
            <div id="Gv"> GGGGGGG text GGGGGGG </div>
            <div id="Pv"> PPPPPPP text PPPPPPP </div>
        </div>
    </div>
    <button class="scroll down"     value="vert"    >v</button>
    <button class="scroll vertical" value="vert  Gv">G</button> <button class="scroll vertical" value="vert Pv">P</button>
</p>

<p>
    <h1>Horizontal scrolling again</h1>
    <button class="scroll right"      value="horiz"   >&gt;</button>
    <button class="scroll horizontal" value="horiz  Eh">E</button> <button class="scroll horizontal" value="horiz Fh">F</button>
    <div id="horiz">
        <div> <!-- THIS DIV IS THE CONTAINER THAT IS ANIMATED -->
            <span id="Eh"> EEEEEEE text EEEEEEE </span>
            <span id="Fh"> FFFFFFF text FFFFFFF </span>
            <span id="Gh"> GGGGGGG text GGGGGGG </span>
            <span id="Ph"> PPPPPPP text PPPPPPP </span>
        </div>
    </div>
    <button class="scroll left"       value="horiz">&lt;</button>
    <button class="scroll horizontal" value="horiz Gh">G</button> <button class="scroll horizontal" value="horiz Ph">P</button>
</p>

CSS

#vert, #horiz{
        position: relative;  
        overflow: hidden;    
        font-family: monospace;
        line-height: 1.5em;
        height: 1.5em;
        width: 20em;
        border: 2px inset #000;
    }
    #vert>div, #horiz>div {
        position: absolute;
        top: 0;
        left: 0;
        height: 2000em;
        width: 2000em;
        margin: 0;
        padding: 0;
        border: 0;
    }
    #vert>div>div{
        display: block;
        position: absolute;
        height: 1.5em;
        width: 20em;
        margin: 0;
        padding: 0;
        border: 0;
    }    
    #horiz span {
        display: block;
        position: absolute;
        height: 1.5em;
        width: 20em;
        margin: 0;
        padding: 0;
        border: 0;
    }

JavaScript

$('#vert>div>div').each(function(i){        // position the "divs"
        var $this = $(this);
        var amount = $this.parent().parent().height();
        $this.css({top: i * amount});
    });        
    $('#horiz>div>span').each(function(i){      // position the "spans"
        var $this = $(this);
        var amount = $this.parent().parent().width();
        $this.css({left: i * amount});
    });
    
    $('.scroll').click(function(){
        var $this   = $(this);
        var value   = $this.attr('value');
        var values  = value.split(/ +/);
        var port    = '#' + values[0];
        var items   = port + '>div';
        var item    = (values.length == 2) ? '#' + values[1] : '';
        var $items  = $(items);
        var classes = $this.attr('class');
        if (classes.match(/\bup\b/))               {    // up - Use "match" instead of hasClass() for performance
            $items.animate({top:  '-=' + $(port).height()}, 'slow');
        } else if (classes.match(/\bdown\b/))      {    // down         
            $items.animate({top:  '+=' + $(port).height()}, 'slow');
        } else if (classes.match(/\bleft\b/))       {    // left
            $items.animate({left: '-=' + $(port).width()}, 'slow');
        } else if (classes.match(/\bright\b/))      {    // right
            $items.animate({left: '+=' + $(port).width()}, 'slow');
        } else if (classes.match(/\bvertical\b/))   {    // vertical
            var amount = parseInt($items.css('top')) + parseInt($(item).css('top'));
            $items.animate({top:  '-=' + amount}, 'slow');
        } else if (classes.match(/\bhorizontal\b/)) {    // horizontal
            var amount = parseInt($items.css('left')) + parseInt($(item).css('left'));
            $items.animate({left: '-=' + amount}, 'slow');
        } else {
            return false;
        }
    });