Overflow scroll bar colours

Question

I am a newbie to HTML and CSS and am trying to design a website, where the majority of text will be in boxes on the screen.

Each box will be coloured differently and will have more text than is visible directly

My question

Can I make the background colour of the scroll section, ie the bit between the two arrow heads match the existing background colour?

If I could even change the colour of the actual scroll bar, that would be even better

Finally, can I get rid of the horizontal scroll bar, as it is not required ? At present it makes my box have a white band along the bottom

Answer 1

There are several soutions to change the style of scrollbars on websites:

1. Via CSS: This doesnt work reliable: For example it works only in IE, not in firefox. So I would avoid that.

2. Via JavaScript: I suggest: Hide the browser-scrollbars and make your own scrollbar using javascript and some arrow-images, so you got full control over the style. For example you could use JQuery and JScrollPane (demo). According to the documentation this works in all modern browsers (IE, Firefox ...). If the user would disable javascript support it would still work but the scrollbars appear unstyled.

Answer 2

Only Internet Explorer and Opera in quirks mode support colouring browser scrollbars, so you'll need to try a javascript solution.

Interestingly, CSS defines some system colors, so if you're (very) flexible with your design you could set the background of the scroll area to match one of those. An unlikely solution though.

For the horizontal scrollbar, you could try out overflow-x: hidden; overflow-y: scroll. That is intended to stop horizontal scrolling but allow vertical scrolling. I believe it is CSS3 so is unlikely to work in all browsers.

Update: Just saw this, which should meet your needs: http://www.leigeber.com/2009/09/javascript-scrollable-div/