How Can I Create A Custom Scrollbar?

I want to create a custom scrollbar, without using the built-in system one.

[cosmoyoda]

Hello,

I've been wondering if it is possible. I would like to use JavaScript or AJAX or PHP ( these are the ones I am using on my site) to create a custom scrollbar. An example of a really nice custom scrollbar that I found on the web is one in the Apple Website: [apple.com...] It is really nice and if you guys know a good script that can do something like that, that would be awesome!

Sorry if this is a dumb question, but I am new to Web Development. I found this site and I thought it would be a good idea to post this question here, since this is such a big community and the people are very helpful.

Thank you for the help!

[lavazza]

Hi cosmoyoda,

I looked at the Apple site and wondered 'what cool scrollbar?'... and then figured that - because I view ALL sites with javascript disabled - all I could see was a bog-standard (and pig-ugly) set of horizontal and vertical scrollbars... and without <noscript> tags, the mac site designers gave me NO CLUE that I might be missing something they had spent (probably) a not inconsiderable amount of time (i.e. $$$) implementing

Javascript is great for controlling the 'behaviour' of elements within a page

CSS is for controlling the presentation

Admittedly, many surfers use browsers with CSS turned off too - but they are not only in the minority, they are also (stereotypically) less-than-naive in regard to surfing the net

However, the look and feel of scrollbars is, I think, notoriously difficult to control across the range of popular browsers...

So... if that sort of 'feature' is a priority, javascript (or similar) may well be the best approach and if you look at the 'source code' of that Apple Mac page, you can see all of the javascript - and it doesn't seem to be copyrighted

Personally, if such a 'look and feel' was perceived (by a client*) as high priority, I'd start asking myself the WHY questions... and then, if necessary, the HOW questions

* All too often, the WHY questions for site developers keen on implementing 'bells and whistles' type 'features' are similar to the question 'why do dogs lick their nether regions?'

[cosmoyoda]

Try looking at the site www.apple.com/mac with JavaScript enabled. You will see a container where you can find all the Mac-Related Apple products and you can scroll using a custom scrollbar that they placed on the site using CSS.

Yeah, I know what you mean, but I have no choice, I would like to use CSS and JavaScript to make something like that. It's very pretty. I know how to use the CSS Atributes overflow: hidden and overflow: auto to make a large box be navigated using a scroll, but it would be nice if I could MAKE my own scrollbar.

I checked the Source code in the Apple site, and the scripts are obviously copyrighted. I was wondering if you guys know how to write a script to make custom scrollbars.

I tried HotScripts.com, but didn't find anything. Perhaps I didn't search enough?

Thanks!

[cosmoyoda]

Lavazza, when you said the javascript scripts in the Apple site are not copyrighted, I thought you were kiddin me! :D

Now I just checked again, and turns out they are not copywrited and they were not created by Apple! I just found an amazing website called:

[script.aculo.us...]

They offer some free scripts, and it's really useful, I think now I may be able to create some nice fancy scrollbars and maybe even some nice Slide-in Slide-out container boxes that you can see in the Apple Mac site www.apple.com/mac

Thanks for the help!

[Dabrowski]

because I view ALL sites with javascript disabled

I'd be interested to know why?

[lavazza]

For three reasons:

1. Having javascript ENabled by default poses a security risk
   
2. Having javascript DISabled by default is easy:
   In what is my current 'default' browser - Firefox - thanks to a free and simple add-on called NoScript: [noscript.net...] a site with quite a bit more info relating to the possible risks
   If anyone know of a similar extension for Opera, I'd love to know... I haven't looked for a while
   
3. ENabling javascript on a site-by-site (or even page-by-page) basis is easy too
   

[Dabrowski]

ok, had a look at that site, the risks highlighted seem to relate more to user stupididty than anything else.

I don't think I'm paranoid enough to disable it yet, but thanks for the reply and the link.