PDA

View Full Version : Changing the scroll bar appearance


takes2totricycle
08-06-2010, 06:22 PM
Hi All,

I've been working on a portfolio website for a little while now, which is currently built as a hybrid html and flash. I was hoping to code the whole thing in html, but was having some problems with the horizontal scrolling portion of the site. You can see how it looks here: jcolt.com

There are 2 main things that are holding me back from this being entirely html:
I'd like to change the appearance of the scroll bar, so it looks like what i've done in the current flash version.

I'm also trying to map the scroll wheel on the mouse to scroll horizontally, across the gallery. Currently it works like this in the flash version, but again, trying to do it in html. I've seen it done successfully on this site: http://www.ptarmak.com/

My question is mainly; how complicated would this be to do? I have a working knowledge of html, but most of this site has been trial and error. Secondly, could anyone point me in the direction of code, or a discussion of how to do this?

Thanks in advance.

DWcourse
08-06-2010, 09:28 PM
I believe the page you referenced used this: http://www.hesido.com/web.php?page=customscrollbar (kinda cool actually)

Corrosive
08-07-2010, 07:52 AM
Yes, I like that approach. I've used a script by kelvin luck in the past. It took some work but it looked good in the end. Difficult to get right cross-browser mind you.

takes2totricycle
08-07-2010, 06:35 PM
Thanks guys. With lots of trial and error, I got it to work as I was hoping it would: jcolt.com.

Appreciate the help!

gentleone
08-08-2010, 01:06 PM
Due to the possibly overflow:hidden that you've set on the body tag I don't see the horizontal scrollbar and I only see a part of your portfolio, so I can't navigate your portfolio (my screen resolution is 1280 x 800). I only can navigate if I go full-screen.

Either remove the overflow:hidden property so that there will be a vertical scrollbar or adjust your heights so that everything will fit without full-screen for lower screen resolutions.