Custom scroll-bar colors

[Poontang]

1) Script Title: Scrollbar Colors customization

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/barcolor.htm

3) Describe problem: Crossbrowser


Hello friends

The script above seems to be the easiest way (at least for me) to control the colors of the scrollbar.
But - this little script isn't crossbrowser supported.
Is there anyway to control the scroll-bar colors just as easy, and have it working as well in Safari, FF Chrome etc.?

[jscheuer1]

No. Only IE (and in certain cases Opera) allow this. Others consider it a part of the OS and therefore off limits to javascript.

You can customize scrollbars within the page (though not simply and requires javascript), and even disable them for the page.

[Poontang]

Then, what if the frame is within an iFrame?

[jscheuer1]

IE and sometimes Opera only. You could disable scrolling on the iframe and create custom scrolling using javascript if both pages are on the same domain.

The bottom line though is that this degree of control over a web site's appearance is generally considered excessive. If you use server side code and javascript, you can probably get around these limitations for most browsers. But it's complicated.

Or you can take what you're given in IE and possibly Opera and just allow the default bars in others. Incidentally, Safari, perhaps Chrome, others, have their own defaults.

When taking any approach to custom scrollbars, it's best to use the custom bars in such a way that if a given browser doesn't support it, it doesn't break the page.

[Poontang]

Exactly!

My biggest concern is, that a standart, light gray scroller breaks the site's design - badly!

I am working on a new, dark base-design (#222222).
Having a light scroll-bar here is horrible to look at!

A way to get around that problem could be:
http://www.dynamicdrive.com/dynamici...gescroller.htm
I've used this before - and it seems to work great cross browsers.
- tho the possitions of the scroll-bottons varies slightly..
Also, as I recall, this script doesn't support mouse-wheel scrolling /

[Beverleyh]

I think that John was saying that accessibility should be your primary concern. At the end off the day, a default scrollbar won't hinder a visitors accessibility of your content while a possibly badly scripted custom scrollbar might. The content and functionality of a website is ultimately more important than the design so if your design elements are in some way detrimental to functionality, your site will fail the visitor. Its a judgement call though and if you can find a way to satisfy the design without hindering accessibility then go with it. Good luck with your project.

[jscheuer1]

You could use that script on the page in the iframe, on any page really to control its vertical scrollbar, replace it actually. If you have control over the source code of the page, if iframe, this means the page in the iframe.

On a standards compliant page, add this to the script:

document.documentElement.style.overflowY = 'hidden';

It can go right at the end, right before the closing </script> tag.

Just to be clear, for iframe, the entire script and its markup must be on the page in the iframe. The script part may be made external, for iframe or not iframe pages.

That will give you just the up and down arrow images in supporting browsers if the page in the iframe is also standards compliant. These will appear near the bottom of the iframe, within the iframe.

These arrows could be moved to the top page, but that gets a bit complicated and requires the pages be on the same domain. And not only on the same domain, but also seen by the browser to be on the same domain, which if you don't use all relative paths can get tricky with www. and not www. perhaps appearing in the URLs as taken from the browser's perspective.