window.onload = function() { if (document.getElementById('contentscroll')){ if ($('contentscroll').scrollHeight > $('contentscroll').offsetHeight) { Element.setStyle('track1', { visibility: 'visible' } ); Element.setStyle('handle1', { visibility: 'visible' } ); var sh = Math.ceil($('contentscroll').offsetHeight/$('contentscroll').scrollHeight*$('track1').getHeight()); var aY = Math.ceil((sh-$('handle1').getHeight())/2); } else { var aY = 0; } // vertical slider control slider1 = new Control.Slider('handle1', 'track1', { alignY: eval(aY), axis: 'vertical', onSlide: function(v) { scrollVertical(v, $('contentscroll'), slider1); }, onChange: function(v) { scrollVertical(v, $('contentscroll'), 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 ($('contentscroll').scrollHeight <= $('contentscroll').offsetHeight) { slider1.setDisabled(); $('track1').hide(); } else { Element.setStyle('handle1', { height: sh+'px' } ); $('arrow_up').show(); $('arrow_down').show(); } Event.observe('arrow_up', 'mousedown', scrollUp); Event.observe('arrow_down', 'mousedown', scrollDown); Event.observe('arrow_down', 'mouseout', function() { if(typeof t=="undefined") {} else { window.clearInterval(t) } }); Event.observe('arrow_down', 'mouseup', function() { if(typeof t=="undefined") {} else { window.clearInterval(t) } }); Event.observe('arrow_up', 'mouseout', function() { if(typeof t=="undefined") {} else { window.clearInterval(t) } }); Event.observe('arrow_up', 'mouseup', function() { if(typeof t=="undefined") {} else { window.clearInterval(t) } }); // mouse wheel code from http://adomas.org/javascript-mouse-wheel/ function handle(event,delta) { var elt = Event.element(event); while(elt != $('contentscroll') ) { elt = elt.parentNode; } if(elt == $('contentscroll')){ slider1.setValueBy(-delta/(elt.scrollHeight-elt.offsetHeight)*20); } } function scrollUp() { if(Event.element(event).id == 'arrow_up'){ var slider = slider1; } else { var slider = slider1_left; } t = window.setInterval(function() { slider.setValueBy(-0.1) },100); } function scrollDown() { if(Event.element(event).id == 'arrow_down'){ var slider = slider1; } else { var slider = slider1_left; } t = window.setInterval(function() { slider.setValueBy(0.1) },100); } /** Event handler for mouse wheel event. */ function wheel(event){ var delta = 0; if (!event) /* For IE. */ event = window.event; if (event.wheelDelta) { /* IE/Opera/Safari. */ delta = event.wheelDelta/60; /** In Opera 9, delta differs in sign as compared to IE. */ } 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 (event,delta) handle(event,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('contentscroll', 'DOMMouseScroll', wheel); // IE/Opera Event.observe('contentscroll', 'mousewheel', wheel); } }