
    // vertical slider control
    var slider1 = new Control.Slider('handle1', 'track1', {
            axis: 'vertical',
            range: $R(0, ($('scrollable1').scrollHeight-$('scrollable1').offsetHeight)/10),
            onSlide: function(v) { scrollVertical(v, $('scrollable1'), slider1);  },
            onChange: function(v) { scrollVertical(v, $('scrollable1'), slider1); }
    });
    
    // scroll the element vertically based on its width and the slider maximum value
    function scrollVertical(value, element, slider) {
            $(element).scrollTop = Math.round(value/slider.maximum*($(element).scrollHeight-$(element).offsetHeight));
    }
 
   // disable vertical scrolling if text doesn't overflow the div
    if ($('scrollable1').scrollHeight <= $('scrollable1').offsetHeight) {
            slider1.setDisabled();
            $('track1').hide();
    }
    
    // mouse wheel code from http://adomas.org/javascript-mouse-wheel/
    function handle(delta) {
            slider1.setValueBy(-delta);
    }
    
    /** Event handler for mouse wheel event. */
    function wheel(event){
            var delta = 0;
            if (!event) /* For IE. */
                    event = window.event;
            if (event.wheelDelta) { /* IE/Opera. */
                    delta = event.wheelDelta/120;
                    /** In Opera 9, delta differs in sign as compared to IE. */
                    if (window.opera)
                            delta = -delta;
            } else if (event.detail) { /** Mozilla case. */
                    /** In Mozilla, sign of delta is different than in IE.
                    * Also, delta is multiple of 3.
                    */
                    delta = -event.detail/3;
            }
    
            /** If delta is nonzero, handle it.
            * Basically, delta is now positive if wheel was scrolled up,
            * and negative, if wheel was scrolled down.
            */
            if (delta)
                    handle(delta);
    
            /** Prevent default actions caused by mouse wheel.
            * That might be ugly, but we handle scrolls somehow
            * anyway, so don't bother here..
            */
            if (event.preventDefault)
                    event.preventDefault();
            
            event.returnValue = false;
    }
    
    // mozilla
    Event.observe('scrollable1', 'DOMMouseScroll', wheel);
    
    // IE/Opera
    Event.observe('scrollable1', 'mousewheel', wheel);
