DIV scroll area with custom scroll bars

**andyweb** · May 5, 2005 21:35

I'm looking for a script that does something exactly like this....
http://www.dyn-web.com/dhtml/scroll/scroll-rel.html
I'd use this one except, I think the code is quite bloated and a little too heavy for my liking.

I've been looking around, and I can't find a light-weight version that allows the scroll bar to be dragged - that's all I want, don't need the arrows.

If anyone knows any off the top of their heads, that'd be great

**vwphillips** · May 6, 2005 16:08

there a number of elements to construct so code may seem large if constructed using DOM.

code may be be smaller if HTML code used.

will have a look tomorrow

**SUPERUSER** · May 6, 2005 17:21

This scrollbar is very good looking, but it is very annoying for the user.

Me personnaly, have abandoned a frequently used news site because they have changed their layout to a scrolling frame with a scrollbar like this.

First it was fun. 5 min. later it was boring. The next day I just gave up, and went to the next news site.

**Kravvitz** · May 6, 2005 19:00

I agree with SUPERUSER -- use the normal scrollbars.

**andyweb** · May 7, 2005 17:29

SUPERUSER your're assuming this is for a news site, which it isn't. Otherwise I'd totally agree with you.

vwphillips - I realise it's gonna be fairly complex, I'm just pretty sure the code could be smaller than the code in the example I gave. If not, I'll probably end up going with regular scrollbars.

**Kravvitz** · May 7, 2005 18:17

It doesn't matter what kind of site it is. SUPERUSER just used the news site as an example.

**Markdidj** · May 8, 2005 11:15

I would imagine that all !IE browsers will follow suit and let you style the scrollbars in the near future. It is such a wanted and used function.
Here's the javascript that will let you do it in IE, but you need a browser detector

Code:

if(ie){
bodyStyle=document.body.style;
bodyStyle.scrollbarTrackColor="#EBCD8C";
bodyStyle.scrollbarArrowColor="#FaFaFa";
bodyStyle.scrollbarFaceColor="#D8C59D";
bodyStyle.scrollbarHighlightColor="#fafafa";
bodyStyle.scrollbar3dlightColor="#fafafa";
bodyStyle.scrollbarDarkshadowColor="#B99346";
bodyStyle.scrollbarShadowColor="#B99346";
}

It can be doen using CSS but it stops the stylesheets from validating.

If you want to apply the colored scrollbars to the page rather than the body you will need to style the scrollbrs of the <html> element. eg

Code:

<style type="text/css">
html,body{scrollbar-track-color:#EBCD8C;}
</style>

**Kravvitz** · May 8, 2005 15:27

Maybe, but then again, maybe not.

Anyway, scrollbar colors are optional in newer versions of Opera.
http://www.opera.com/support/search/....dml?index=637
http://www.quirksmode.org/css/scrollbars.html

**andyweb** · May 8, 2005 17:05

Thanks Markdidj, but I'm not looking to use the normal built in scroll bar, but rather create one myself out of javascript - as per the example I gave, since it uses minimal real-estate and will look the same in every browser.

**Kravvitz** · May 8, 2005 17:26

Trying to make pixel perfect, cross-browser/platform sites is a waste of time.

That script that you linked to is rather glitchy in Netscape 6.x and doesn't really work at all in Opera 6.x, now even though those versions are a few years old, there may still be a few people who have neglected to upgrade.

Scrollbar scripts are just not very accessible. What happens if someone has JavaScript disabled? Well that script does not degrade gracefully, meaning that that page is basically useless when JavaScript is not enabled.

**andyweb** · May 8, 2005 18:02

Yeah, Kravvitz, after looking around some more - I've decided to abandon that idea. Besides the problems you mentioned, it's just always gonna be too heavy. Just gonna have to re-think my options.

**Markdidj** · May 8, 2005 18:08

I wonder why the other browsers don't allow such scrollbar styling? It's asked for so many times, for such a long time, and is a suberb feature. IE rocks IMO, although it has problems with ActiveX, which after time will be fixed, it has so many extra features when it comes to styling and sound.

Kravvitz, is that Opera function detectable? I think using the javascript will throw an error, unless I use it in the css or javascript written css.

**Kravvitz** · May 8, 2005 18:15

And yet IE lacks support for so much CSS2...

Some people are of the opinion that developers should not use scrollbar colors, which may be part of why they haven't been added to the Mozilla Gecko engine.

**Markdidj** · May 8, 2005 18:16

andyweb, it can be used, but you'll be better off using some noscript anchors to show the bits that are unreachable when js is turned off. see the web or forum sections at my homepage. The pics are the anchor links, and the info is in a scrolling area with the scrollbars hidden.

**Kravvitz** · May 9, 2005 12:12

Originally Posted by Markdidj

Kravvitz, is that Opera function detectable? I think using
the javascript will throw an error, unless I use it in the css or javascript
written css.

I missed this before.

For Opera 7.20+, when in Standards Compliance mode, Opera only supports scrollbar-*-color when they are used inline on elements other than <body> and <html>. In quirks mode, Opera supports them in embedded and linked stylesheets as well as inline on <body>. Unlike IE5.5+, Opera doesn't support manipulating them through <objectRef>.style.scrollbar******Color at all.

User Tag List

Thread: DIV scroll area with custom scroll bars

Thread Tools

Display

DIV scroll area with custom scroll bars

Bookmarks

Bookmarks

Posting Permissions