Control.

ScrollBar : Pure JavaScript/CSS scroll bars for Prototype

Page 1 of 3

LivePipe : User Interface Components for Prototype

Home Core Controls Extras Download & Contribute

Created by Syntacticx ContextMenu ProgressBar Rating ScrollBar SelectMultiple Selection Tabs TextArea Window

Control.ScrollBar
Pure JavaScript/CSS scroll bars for Prototype. scrollbar.js source Tutorial API

Introduction
Why emulate a native UI component? Primarily, the inconsistent cross browser behavior of native scrollbars. Firefox for instance considers scrollbars to be entirely outside the layout of a document. If a Draggable element goes over a native scrollbar in this case, the mouse has left the page, disrupting the drag operation. Rewriting the scrollbar in the DOM solves this problem. Fringe benefits include granular control over the behavior and style as well as richer API. This scrollbar implementation includes mouse wheel support, a proportionally drawn handle, and can accommodate dynamic content and layout changes with the recalculateLayout() method.

Use the Mouse Wheel or Handle to Scroll

Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consectetuer. Phasellus molestie, sem vel laoreet pretium, arcu arcu rutrum eros, ac mattis felis ante at orci. Vivamus vel mauris. Ut porttitor, nunc eu tincidunt gravida, orci odio luctus mi, id venenatis dui nunc sit amet turpis. Mauris urna nisl, feugiat a, ultrices id, ultrices et, est. Nam eu felis non tortor luctus congue. Mauris consequat malesuada augue. Donec eu nibh in libero tempor aliquet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sapien erat, imperdiet tincidunt, vestibulum eget, fringilla vel, odio. Ut risus. Ut pretium neque ac velit. Vivamus diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Nunc luctus fringilla mi. Nunc ultrices nisi ac urna. Insert Paragraph and recalculateLayout()

Scroll To...
Up 50 Pixels Down 50 Pixels Top Bottom (Animated) Second Subhead Third Subhead (Animated)

HTML
Control.ScrollBar requires a very particular HTML structure. There must be a positioned outer container, with the track and scrollable container as direct children. The track must contain a single div (with any id or class name). You do not reference the outer container or handle when calling initialize(), only the scrollable content, and the track. The scrollable content must have it's overflow property set to hidden.
1. <div id="scrollbar_container">

http://livepipe.net/control/scrollbar

16/04/2012

Control.ScrollBar : Pure JavaScript/CSS scroll bars for Prototype

Page 2 of 3

2. <div id="scrollbar_track"><div id="scrollbar_handle"></div></div> 3. <div id="scrollbar_content">...</div> 4. </div>

JavaScript
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track'); $('scroll_down_50').observe('click',function(event){ scrollbar.scrollBy(-50); event.stop(); }); $('scroll_up_50').observe('click',function(event){ scrollbar.scrollBy(50); event.stop(); }); $('scroll_top').observe('click',function(event){ scrollbar.scrollTo('top'); event.stop(); }); $('scroll_bottom').observe('click',function(event){ //to animate a scroll operation you can pass true //or a callback that will be called when scrolling is complete scrollbar.scrollTo('bottom',function(){ if(typeof(console) != "undefined") console.log('Finished scrolling to bottom.'); }); event.stop(); }); $('scroll_second').observe('click',function(event){ //you can pass a number or element to scroll to //if you pass an element, it will be centered, unless it is //near the bottom of the container scrollbar.scrollTo($('second_subhead')); event.stop(); }); $('scroll_third').observe('click',function(event){ //passing true will animate the scroll scrollbar.scrollTo($('third_subhead'),true); event.stop(); }); $('scroll_insert').observe('click',function(event){ $('scrollbar_content').insert('<p><b>Inserted: ' + $('repeat').innerHTML + '</b></p>'); //you only need to call this if ajax or dom operations modify the layout //this is automatically called when the window resizes scrollbar.recalculateLayout(); event.stop(); });

CSS
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. #scrollbar_container { position:relative; width:500px; } #scrollbar_track { position:absolute; top:0; rightright:0; height:100%; width:10px; background-color:transparent; cursor:move; } #scrollbar_handle { width:10px; background-color:#5c92e7; cursor:move; -moz-border-radius: 5px; -webkit-border-radius: 5px;

http://livepipe.net/control/scrollbar

16/04/2012

Control.ScrollBar : Pure JavaScript/CSS scroll bars for Prototype

Page 3 of 3

22. opacity:0.9; 23. -moz-opacity:0.9; 24. } 25. 26. #scrollbar_content { 27. overflow:hidden; 28. width:485px; 29. height:250px; 30. }

Created by Ryan Johnson 2008 PersonalGrid Corporation

http://livepipe.net/control/scrollbar

16/04/2012