jQuery UI Scrollable

Make DIV elements scrollable with sexy jQuery UI sliders.

by mitchmalone

HTML

<script src="http://www.simonbattersby.com/javascript/jquery.mousewheel.min.js"></script>
<div class="scroll-pane">
    <div class="scroll-content">
        <div class="scroll-content-item">1</div>
        <div class="scroll-content-item ">2</div>
        <div class="scroll-content-item ">3</div>
        <div class="scroll-content-item ">4</div>
        <div class="scroll-content-item ">5</div>
        <div class="scroll-content-item ">6</div>
        <div class="scroll-content-item ">7</div>
        <div class="scroll-content-item ">8</div>
        <div class="scroll-content-item ">9</div>
        <div class="scroll-content-item ">10</div>
        <div class="scroll-content-item ">11</div>
        <div class="scroll-content-item ">12</div>
        <div class="scroll-content-item ">13</div>
        <div class="scroll-content-item ">14</div>
        <div class="scroll-content-item ">15</div>
        <div class="scroll-content-item ">16</div>
        <div class="scroll-content-item ">17</div>
        <div class="scroll-content-item ">18</div>
        <div class="scroll-content-item ">19</div>
        <div class="scroll-content-item ">20</div>
    </div>
</div>

<div class="scroll-pane">
    <div class="scroll-content">
        <div class="scroll-content-item">21</div>
        <div class="scroll-content-item ">22</div>
        <div class="scroll-content-item ">23</div>
        <div class="scroll-content-item ">24</div>
        <div class="scroll-content-item ">25</div>
        <div class="scroll-content-item ">26</div>
        <div class="scroll-content-item ">27</div>
        <div class="scroll-content-item ">28</div>
        <div class="scroll-content-item ">29</div>
        <div class="scroll-content-item ">30</div>
        <div class="scroll-content-item ">31</div>
        <div class="scroll-content-item ">32</div>
        <div class="scroll-content-item ">33</div>
        <div class="scroll-content-item ">34</div>
        <div class="scroll-content-item...

CSS

.body{font-family:Arial, Helvetica, sans-serif;color:#666666}
h1{margin:20px}
p.return{clear:left;margin-left:50px;margin-top:30px}
a:active, a:focus{outline:none}
/* css for scrollbar below here*/
.scroll-pane { float:left;overflow: auto; width: 420px; height:300px;position:relative;border:1px solid gray;margin-left:50px;margin-bottom:25px;display:inline}
.scroll-content {position:absolute;top:0;left:0}
.scroll-content-item {background-color:#fcfcfc;color:#003366;width:100px;height:100px;float:left;margin:10px;font-size:3em;line-height:96px;text-align:center;border:1px solid gray;display:inline;}
.slider-wrap{float:left;background-color:lightgrey;width:20px;border:1px solid gray;border-left:none;}
.slider-vertical{position:relative;height:100%}
.ui-slider-handle{width:20px;height:10px;margin:0 auto;background-color:darkgray;display:block;position:absolute}
.ui-slider-range{position:absolute;width:100%}
input{font-size:12px}

JavaScript

// This script is an adaption of the following example:
// http://www.simonbattersby.com/demos/vertical_scrollbar_demo.htm
(function($) {
    $.fn.makeScroll = function() {
        $(this).each(function() {
            $(this).css('overflow', 'hidden');

            var difference = $(this).find('.scroll-content').height() - $(this).height();

            if (difference > 0) {
                var proportion = difference / $(this).find('.scroll-content').height();
                var handleHeight = Math.round((1 - proportion) * $(this).height());
                handleHeight -= handleHeight % 2;

                $(this).after('<\div class="slider-wrap"><\div class="slider-vertical"><\/div><\/div>');
                $(this).next('.slider-wrap').height($(this).height());

                $(this).next('.slider-wrap').find(".slider-vertical").slider({
                    orientation: 'vertical',
                    range: 'max',
                    min: 0,
                    max: 100,
                    value: 100,
                    slide: function(event, ui) {
                        var topValue = -((100 - ui.value) * difference / 100);
                        $(this).parents(".slider-wrap").prev(".scroll-pane").find('.scroll-content').css({
                            top: topValue
                        });
                    }
                });

                $(".ui-slider-handle").css({
                    height: handleHeight,
                    'margin-bottom': -0.5 * handleHeight
                });

                var origSliderHeight = $(this).next('.slider-wrap').find(".slider-vertical").height();
                var sliderHeight = origSliderHeight - handleHeight;
                var sliderMargin = (origSliderHeight - sliderHeight) * 0.5;
                $(".ui-slider").css({
                    height: sliderHeight,
                    'margin-top': sliderMargin
                });
                $(".ui-slider-range").css({
                  ...