In my professional life, I often find myself working with JavaScript based scrollbars. While I personally find the approach distasteful, I understand that the decision is not always made by the developer (who knows best). I’ve been continually disappointed by the quality of the available libraries. So, I’ve set out to build my own and make it freely available to others. It’s based on – and requires – prototype.js.
Download: ScrollBox.js v0.8
Usage
Simply create a new ScrollBox object and pass in the element you would like to become a scroll box. Note that the element passed used to create the object must be positioned either relative or absolute. The example css file includes this directive on the first line.
Example:
var sb = new ScrollBox($('description_box'));
Full documentation will follow when I have time. For now, there is a complete implementation example included in the zip.
Features
Fully customizable, mostly though simple CSS changes. A sample implementation is included in the download. Supports scrolling with the mouse wheel. The buttons support clicking and holding, the scrollbar has multiple selectable behaviors, and the handle is fully functional. Supports keyboard events up, down, page up, page down, home, and end. Works with named anchors.
Status
If you would like to do some testing, please do. Feedback is greatly appreciated. I expect I’ll have a 1.0 release shortly.
Tested in the following browsers:
- FireFox 1.5 Win/Mac
- FireFox 2.0 Win/Mac
- Safari 2
- Safari 3
- IE6 (see Known Issues)
- IE7
Known Issues
- If you grab the scroll handle and release the mouse button outside of the window, the scroll handle does not get released until you click again within the window. If anybody knows how to fix this, please let me know.
Contributing
Previous Versions
License
Copyright © 2007 Dave Grijalva
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Hi! First of all, thx for this nice done js component! One remark, that for some other folks may be trivial, but it was not the case for me. The ScrollBox.js import must be placed after the Prototype.js import, otherwise it won’t work.
Thx again: alex, hungary
Hello, manyyyyyyyyyy thanks. I lost all day to find your component. All I have tested are to amateurs or to complicated and the code are ugly, but your solution yes really good. And thanks for Ruby helper, it will be a shortcut in my rails app. Thanks again.
.
Cheers.
cool!
Any chance you could put up an example up that is viewable without downloading?
I’m working on replacing wordpress for this site. Once the new site goes up, I’ll include demos.
Great and useful script only …
… for reaching ideal case – smooth scrolling (animated scrolling) needed on up/down button and scrollbar blank part click. Not tested yet how it acts on contents change in .scrollbox_content.
Where are demo or Examples?
There’s a working demo in the download. Someday, I’ll get around to putting one up on this page, but today is not that day. Just download the zip and open up the html file in your browser.
There’s a small bug. The scroll wheel direction is inverted in Opera. I fixed this:
old line 252: this.scrollUp();
new line 252: if (navigator.appName.toLowerCase().indexOf(“opera”) < 0) this.scrollUp(); else this.scrollDown();
old line 260: this.scrollDown();
new line 260: if (navigator.appName.toLowerCase().indexOf(“opera”) < 0) this.scrollDown(); else this.scrollUp();
This project is now hosted on github. Feel free to fork and modify. I’d love to see how others can improve this codebase.
http://github.com/dgrijalva/scrollbox.js
I have spent several hours trying to customize this but any styles applied to the .scrollbox_scrollbar, .scrollbox_up_button and .scrollbox_handle seem to have no effect. Even the included graphics for the up and down buttons are not loading.
I can’t figure out what is causing this. Must be something hard coded into the js?
Can’t waste anymore time on this unfortunately. If I can’t customize the scroll area, its useless to me.
@Andy
There is an example implementation included in the download, which does work. Remember when linking to images from a CSS include that they are relative to the CSS file, not the including document.
@gka
Good catch! I haven’t tested in Opera. Is there a good reason to use the browser string instead of looking for window.opera?
I am trying to use the software but am bombing out with a “Microsoft JScript runtime error: ‘this.element.className’ is null or not an object” caught in this segment of code in prototype.js:”
var Enumerable = {
each: function(iterator) {
var index = 0;
try {
this._each(function(value) {
try {
iterator(value, index++);
} catch (e) {
if (e != $continue) throw e;
}
});
} catch (e) {
if (e != $break) throw e;
}
return this;
},”
What version of IE are you having troubles with? There’s a pretty old version of prototype bundled. You might need to update to a newer version of prototype (prototypejs.org), but that might require code changes. Scrollbox.js is up on github: http://github.com/dgrijalva/scrollbox.js. If you feel like updating it to the latest version, please submit a pull request.