tips and tricks for movable type

amy's css scrollbar cheatsheet
June 13, 2002

Found this over yonder at ScriptyGoddess: Amy's cheatsheet for coding your scrollbar CSS.

BODY {
scrollbar-base-color: MEDIUM;
scrollbar-face-color: MEDIUM;
scrollbar-track-color: BACKGROUND;
scrollbar-highlight-color: LIGHT;
scrollbar-3dlight-color: MEDIUM;
scrollbar-shadow-color: DARK;
scrollbar-darkshadow-color: MEDIUM;
scrollbar-arrow-color: DARK;
}

Handy to keep in a text file on your desktop!

Comments

Is it possible to apply stylesheet attributes to the scrollbar generated by a dropdown box? I only seem to get it on the browser and on textareas.

I would also like to change the highlight color from Windows blue to something else.

Dd

by dougie d | 01.30.03 05:32 PM

I don't think that's available yet, just changing things like background-color or color.

<select style="background-color: red; color: white;">

by tj | 02.04.03 09:46 PM

when you customize the scrollbar, how can you get rid of that right-sided color such as on a whitebackground..you see a black strip of line on the very edge of the window. how can i have that blank so all you see are 2 scroll arrows and no tracker whatsoever.

by kc | 04.07.03 12:41 PM

Does it work to make every color definition #FFFFFF, except for the arrows?

by girlie | 04.07.03 06:50 PM

yep that will do the trick !

by iced glare | 04.09.03 03:20 AM

I just started doing weblog. I understood the use of scrollbar colors, but it for some reason , it only applied to comment box scroll bar. how do i get it to apply to the main window scroll bars, etc?

thanks!

by MKS | 06.15.03 02:01 PM

Instead of the BODY class (as in the example), create an HTML class to hold the scrollbar CSS definitions.

by girlie | 06.15.03 03:45 PM

hmm... perhaps a small example of that could help? :-D Where do I place the HTML class in: in the CSS, in main index, or ....? Thanks girlie.

by MKS | 06.15.03 06:36 PM

In your stylesheet template.

Just use the "cheatsheet" above, changing BODY to HTML.

by girlie | 06.15.03 07:22 PM

How do you get rid of the scrollbar at the side?

by ss | 07.06.03 11:01 AM

To get rid of the scrollcar at the side use:
style="overflow: hidden"

or style block

BODY {
overflow: hidden;
}

or scripting...

document.body.style.overflow="hidden";

by kiddanger | 08.24.03 07:40 AM

The easiest way I've found to make colored scrollbars is to add scrollbar-base-color: #color; to your body tag. Whatever color you use it just uses for everything and makes a nice scrollbar for you. Check it out, it's super easy.

by Jamie-Lynn | 09.04.03 11:53 AM

If you are trying to achieve 100% CSS validation, this is not possible with this scrollbar snippet.

Not for nothing, it's a great idea, and I will be using it, however, I am going to see if there is a way to get 100% valid CSS and still use the scrollbar.

by Justin | 12.08.03 11:39 AM

Hi, I am trying to create two tables, side-by-side, in the middle of a .cfml page. The table on the right is too wide to fit comfortably into the page, so I am trying to use scrollbars to slide it into the first table, from right to left. I have looked at all sorts of possible solutions, including

tags (which do not seem to work outside a table cell), CSS, iFrames, etc. Can you suggest a possible solution?

Thanks kindly in advance,
Scott

by Scott McClelland | 02.02.04 04:22 PM

can you eliminate the horizontal scroll bar only, keeping a vertical scroll bar. asked another way, can you insert a verticle scroll bar only?

by JB | 02.23.04 10:49 AM

Yes:

overflow-x: hidden;

or vertical:

overflow-y: hidden;

;-)

by Rob | 02.26.04 10:40 AM

Excellent! Thanks.

by JB | 02.28.04 02:55 PM

Is it possible through CSS to remove scrollbars so that they are not displayed even if page content cannot fit into the window? This can be done using html body tag scroll="no", but it only works in IE. That is why I need to do it with CSS for cross-browser support.

Thank you in advance

by Panayot Belchev | 03.19.04 01:01 PM

Oh I just found the solution (sory for taking your time) All that is needed is to put a style tag in the body tag like this:

style="overflow:hidden"

by Panayot Belchev | 03.19.04 01:44 PM

Yeah, sorry to backtrack about 9 months, but when it comes to drop down menus, you would be better creating a "pop-up" division (as in you position it above the trigger using z-index and then hide it using visibility:hidden) which can contain pseudo-menu items which change as you mouseover them. This way you can pretty much have any type of menu you like: background images, font/size/weight changes, semi-transparent menus etc.

by Nik | 06.18.04 10:48 AM

kiddanger and Rob, I love you!!! I've been looking all day for this info! If I wasn't married already I'd propose to both of you.

Re:
'To get rid of the scrollcar at the side use:
style="overflow: hidden" '

by RTMac [TypeKey Profile Page] | 09.22.04 07:25 PM

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

TrackBack: 0
(URL: http://www.thegirliematters.com/sf/mt-track.cgi/38)