The Scrollbar Guide | Hidden & Custom Scrollbars [DNP]

[kittymmeow]

This guide is not yet finished!

Please do not post, and be warned that some information may be added or changed in the near future.
This will be moved to the Profile Discussion forum when it is done.

Rules & Troubleshooting

Try to read thoroughly!
If you're having troubles with something, there is a chance I have already addressed your problem within the guide. I have tried to be as understandable as possible, but I admittedly have a tendency to become longwinded in my explanations; However, that is because I am making an effort to maintain as much accuracy and comprehensiveness as possible because simplification leads to misinformation.
Please make an effort to read what I have written.

Give me as much information as possible when asking for help.
If it's a profile/code problem, paste in the exact code you used, set your profile to public, and/or give screenshots.
If you simply don't understand something, try to point out or quote a specific part in the guide that you need help with.

Do not PM me questions about this guide, post them in the thread.
The solution to your problem may help others with the same problem.

If I have directed you here and you have a problem, please do not post here— the guide is not yet complete. PM me your question or quote me in the original thread that I sent you from instead.

Navigation

Introduction
Overflow
Basic Scrollbars
Hidden Scrollbars
Custom Scrollbars: Internet Explorer [UNFINISHED]
Custom Scrollbars: Webkit [UNFINISHED]

[kittymmeow]

Introduction | Overflow | Basic Scrollbars | Hidden Scrollbars | Custom Scrollbars: Internet Explorer | Custom Scrollbars: Webkit

What is overflow?

When the content of an element is too big to fit within the element's set width or height, overflow occurs. The content wants to be outside of its containing element because there is no room for it to fit. It would be inconvenient if the only option would be to have the text falling out of its containing element into the surrounding page. All that extra content has to go somewhere, but where? This is where the overflow property comes in: It specifies what should happen if overflow does occur.

In more formal terms, the World Wide Web Consortium states: "Whenever overflow occurs, the 'overflow' property specifies whether a box is clipped to its padding edge, and if so, whether a scrolling mechanism is provided to access any clipped out content."

Overflow is supported in all major browsers, with the only discrepancy being the inherit value, which I will explain shortly. The related properties of overflow-x and overflow-y, which I will introduce next, are supported in all current major browsers as well.

Overflow-x and overflow-y

The overflow property is actually a shorthand property that encompasses two more specific properties, overflow-x and overflow-y. Overflow on its own specifies the behavior for both axes at once, while these two specify how overflowing content will behave on the x- and y-axes, respectively. Overflow-x and overflow-y use the same values as overflow, but you may use them to specify different behavior on each axis.

If you use overflow in a declaration block, you should not use overflow-x or overflow-y as well in that same declaration block because that would be redundant. Use either overflow on its own, or one or both of the axis-specific properties.

What can overflow do?

Including the default value, the overflow property has five possible values:

• visible: If content exceeds the dimensions of its containing element, it will not be clipped and a scrollbar will not be created. Extra content will simply stay visible and continue on beyond the constraints of its containing element as if no dimensions had been set. This value is default.

• hidden: If content exceeds the dimensions of its containing element, it will be clipped but a scrollbar will not be created. Extra content will be hidden and will not continue beyond the edges of its containing element.

• scroll: A scrollbar is always created, whether content exceeds the dimensions of its containing element or not.

• auto: If and only if content exceeds the dimensions of its containing element, it will be clipped and a scrollbar will be created.

• inherit: Inherits the value of its parent element. Not supported at all in Internet Explorer 7 and earlier. Some problems in IE8 because it requires a !DOCTYPE, however this does not make a difference on Gaia profiles since Gaia has already declared a !DOCTYPE. Fully supported in IE9 and later. Most Gaia users tend not to ever use this, or may not even know it exists. You will be perfectly fine not ever using this either.

Overflow and the float property

Besides scrollbars, overflow has another use: To repair collapsed panels caused by floated elements. Overflow isn't specifically for this purpose, but it works and does come in handy when you need it. If you don't ever use the float property, you will not need to know this.

What happens: If a parent element contains only child elements within it that have a float property set, the parent element will collapse. If the parent element doesn't have a background or a border, this problem may not even be apparent, but to protect against unexpected problems it may cause, it's a good idea to fix it. The overflow property can do this easily.

If you give the collapsed parent element an overflow of auto or hidden, that will cause it to expand to properly fit the child elements. An overflow of scroll also technically works for this, but it also gives awkward unnecessary scrollbars, so auto or hidden are your best choices. Both overflow values give the same result as long as nothing actually ends up overflowing, in which case auto would create a scrollbar and hidden would hide the overflow, just as usual.

Demonstration:
The following images were originally created entirely with CSS on Google Chrome.

float:none | overflow:visible

Unfloated child elements, default overflow on parent.


float:left | overflow:visible

Left-floated child elements, default overflow on parent. Parent element collapses.


float:left | overflow:hidden/auto

Left-floated child elements, overflow on parent set to hidden or auto. Parent element wraps to fit child elements.

[kittymmeow]

Introduction | Overflow | Basic Scrollbars | Hidden Scrollbars | Custom Scrollbars: Internet Explorer | Custom Scrollbars: Webkit

If you're not here for all these fancy scrollbar tricks and just simply want to know how to get stuff to scroll properly, you're in luck. This is the post for you. This is the easiest thing you will find in this guide, so if you want a simple, no-fuss scrollbar solution, this is exactly what you're looking for.

How to create a scrollbar

Creating a scrollbar on an element only requires two things: a set dimension on the axis you want to scroll, and a value set for overflow (or the corresponding axis-specific overflow property). Due to the logic of text flow and the design of your profile that leaves most elements that you would reasonably want to scroll with already set widths, you are less likely to need to create a horizontal scrollbar than a vertical scrollbar. As a result, for most basic uses you will more often than not be assigning an element a height rather than a width if you want a scrollbar, as illustrated in the following code.

The code:

selector {
height: ###px;
overflow: value;
}

As you can see, this is pretty simple code. The only thing you will need to do yourself is insert the correct selector for the element you want to scroll, and set values for height and overflow. Height can be in whatever sort of measurement you want— px, em, %, and so on. Overflow will need one of the values outlined above. Your best bet will most likely be auto for general scrollbar needs, since it only creates a scrollbar if the size of the element's content warrants it. If you so desire you may use scroll instead, but be warned that it will show the scrollbars on both axes, regardless of whether it is necessary on either.

Scrollbars on hover

A popular application of scrollbars and the overflow property is to minimize aesthetic obstruction using the technique of having no scrollbars until the relevant element is hovered over. This only requires one more thing than the basic scrollbar code: an additional overflow value for the :hover pseudoclass.

The code:

selector {
height: ###px;
overflow: hidden;
}
selector:hover {
overflow: auto;
}

As with the previous code, you will still need to insert your selector of choice and set a height for it, but in this case there is only really one value you would want for each instance of the overflow property. For the un-hovered state of the element, having overflow set to hidden makes the scrollbars invisible while also clipping any excess content that may extend outside of the confines of the element's height. For the hovered state of the element, auto is once again your best bet so that if the element doesn't happen to need a scrollbar, one will not be unnecessarily generated. You may use scroll if you wish, but the same warning applies here as well: the scrollbar will show up whether or not you need it.

[kittymmeow]

Introduction | Overflow | Basic Scrollbars | Hidden Scrollbars | Custom Scrollbars: Internet Explorer | Custom Scrollbars: Webkit

Ah, hidden scrollbars; So popular, yet so annoyingly difficult to make work (and such bad user interface!). I understand the appeal —who wants big bulky scrollbars in the way, anyway?— but the existing code that most people use to create them has left profile makers with more problems than solutions, and not to mention a fair deal of confusion along the way.

Warning!

As much as you may love the idea of hiding your big ugly scrollbar to get it out of the way of your profile, in reality, hiding your scrollbars isn't really as great an idea as it seems. It looks nice, sure, but it can also cause problems for some of the viewers of your profile. Maybe you take it for granted, but not everyone has a mouse or trackpad that can scroll without clicking on a scrollbar and moving it. Removing the option of an accessible scrollbar may leave them unable to scroll your content without just resorting to using the arrow keys, which is quite annoying, especially if your profile has a lot of content on it. Try it out, you'll probably see what I mean.

If you want to have some sympathy for the people who are stuck clicking and dragging scrollbars, I suggest you skip the rest of this section and go back to the previous post for instructions on how to get a normal scrollbar; However, if you decide to disregard those people and hide your scrollbar anyway, you may continue reading.

How do hidden scrollbars work?

Creating hidden scrollbars is a technique that is fairly basic conceptually, but can be quite confusing and difficult for people unfamiliar with the way CSS and HTML work. To help explain them in a way that may make it less confusing for the inexperienced, I have created a handy gif of the key part of making hidden scrollbars work:

To explain in writing what that image means, a hidden scrollbar is made up of an inner element and an outer element, and uses padding and the overflow property to create and hide the scrollbar. The scrollbar isn't actually invisible, it is still there on the inner element, but the padding that you add actually just pushes the scrollbar outside of the outer element so you can't see it anymore. The outer element has its overflow set to hidden, so everything beyond the outside of the outer element will be invisible, including the scrollbar after it's been pushed out.

How to create a hidden scrollbar

The existing code options for creating a hidden scrollbar have all been fairly lengthy and confusing, and have required the user to input multiple values and ended up requiring much trial-and-error testing just to get everything working correctly. I have simplified the code so that the only thing you need to specify is the height of the inner element of the panel.

The code:

outer element selector {
overflow: hidden;
}
inner element selector {
overflow-y: scroll;
padding-right: 50px;
height: ##px;
width: 100%;
}

Everything in this code reflects the image demonstration above of how hidden scrollbars work. Outer element selector means the selector for the element on the outside that hides the scrollbar. Inner element selector means the selector for the element on the inside with the actual scrollbar on it.

In order for the scrollbar to work, all you have to do is substitute in the correct selectors, as I will list below, for the inner an outer element, and you have to give the panel a height in order for the scrollbar to show up. The selector for the inner element replaces inner element selector, the selector for the outer element replaces outer element selector, and the height of the panel replaces ##px. Edit in the proper values and put the result into your custom CSS, and it should work.

The selectors

Not all panels come with a built-in inner and outer element or the functionality to create one yourself. Only the panels that have both an inner and outer element work with hidden scrollbars. Without both elements present, the hidden scrollbar simply cannot be made. The following are the selectors for the panels that allow hidden scrollbars:

Current Profiles:

• Friends:

• Outer element selector: #id_friends

• Inner element selector: #id_friends .style1

• Comments:

• Outer element selector: #id_comments

• Inner element selector: #id_comments dl

• Badges:

• Outer element selector: #id_badges

• Inner element selector: #badges

• Journal:

• Outer element selector: #id_journal

• Inner element selector: #entries

• Gifts:

• Outer element selector: #id_gifts

• Inner element selector: #id_gifts ul

• Store:

• Outer element selector: #id_store

• Inner element selector: #id_store div

• Guilds:

• Outer element selector: #id_guilds

• Inner element selector: #id_guilds ul

• Custom:

• Outer element selector: #id_custom_####

• Inner element selector: #id_custom_####_content

Classic Profiles:

• Friends:

• Outer element selector: #friends

• Inner element selector: #friendGroup

• Comments:

• Outer element selector: #comments

• Inner element selector: #comments dl

• Journal:

• Outer element selector: #journal

• Inner element selector: #entries

• Equipped Items:

• Outer element selector: #profile

• Inner element selector: #equipped_id

• Wishlist:

• Outer element selector: #wishlist

• Inner element selector: #wishlist .items

Hidden scrollbars on the About panel

All of the aforementioned elements come with the convenience of built-in inner and outer elements, but not all elements are so lucky. The one element that still possesses the capability of making a hidden scrollbar but doesn't come with an inner element already made is the About panel. In order to make a working hidden scrollbar on your About panel, you have to create an inner element yourself using BBCode.

The way this works relies on the fact that BBCode generates HTML elements that affect your text, and so enclosing the full text of your About Me within a BBCode tag would generate an inner element that you can use to create a scrollbar. The most common element is the BBCode list tag, because it doesn't add any styling to your text (as would tags like b and align), and it's not very often used so the CSS affecting it is less likely to accidentally affect the styling of your text.

The code:

The code for this is simple, and by using it, it will generate a ol element that you can use as an inner element:

[list=1]About Me Text[/list]

Be sure to put all of your desired text within the list tags, and then put this into your About Me and save.

The selectors:

Once you've modified your About Me to create the inner element, you can use the following selectors as the inner and outer elements for your hidden scrollbar:

• Current Profiles:

• Outer element selector: #id_about

• Inner element selector: #id_about ol

• Classic Profiles:

• Outer element selector: #about

• Inner element selector: #about ol

[kittymmeow]

Introduction | Overflow | Basic Scrollbars | Hidden Scrollbars | Custom Scrollbars: Internet Explorer | Custom Scrollbars: Webkit

Internet Explorer has been allowing colored scrollbars since all the way back in the year 2000 with the release of Internet Explorer 5.5, and the same properties (as awkward as they are) are still usable today.

Important to note is that the IE scrollbar codes are properties (in that category is also things like font-family, color, height, etc.) so they must be put inside a declaration block (selector{....}) in order to work. If you want it for everything on the page that needs a scrollbar, just put it inside of html{....}. If you want it for a specific element, put it inside of the declaration block for that element.

The properties:

The code:

html{
scrollbar-face-color:COLOR_1;
scrollbar-arrow-color:COLOR_2;
scrollbar-track-color:COLOR_3;
scrollbar-shadow-color:COLOR_4;
scrollbar-highlight-color:COLOR_5;
scrollbar-3dlight-color:COLOR_6;
scrollbar-darkshadow-color:COLOR_7;
}

Replace each COLOR_# with a color (in RGB, hex, or by name. RGBA colors don't work for this) for each selector corresponding to their respective places in the image. I hope this shouldn't be too hard to understand... Basically, if I wanted the face of the scrollbar (the part that is white in the image) to be a certain color, I'd replace COLOR_1 with that color. If I wanted the shadows to be another color (corresponding to the red in the image), I'd replace COLOR_4 with that color, and so on.

You can't use images to style your scrollbar for this method. Only color values work.

[kittymmeow]

Introduction | Overflow | Basic Scrollbars | Hidden Scrollbars | Custom Scrollbars: Internet Explorer | Custom Scrollbars: Webkit

Safari and Google Chrome have supported custom scrollbars since 2009 using the Webkit browser engine, and Opera and the newest versions of Chrome have supported them since mid-2013 using the Blink engine, which is based on Webkit.

While the Internet Explorer scrollbar codes are all properties, the webkit scrollbar codes, on the other hand, are selectors on their own (in that same category is things like .panel, #columns, etc) so they're always alone in your code. No need to put them inside of anything, the ::-webkit-scrollbar{...} etc code is sufficient on its own. If you want to only style a specific element's scrollbar, put the selector of that element right before the :: (ending up with the syntax of selector::-webkit-scrollbar{...}).

How to style Webkit Scrollbars

Webkit/Blink's custom scrollbars are far more versatile than IE's, but that means they're also considerably more complicated. There are actually 7 selectors and 11 pseudoclasses that are specifically for scrollbars, and you can also use the standard :hover and :active pseudos as well, combining all of those into basically as many combinations as you can imagine, but for now I'm just listing the three main scrollbar selectors since they're pretty much all you really need for a basic, good-looking scrollbar

The selectors:

The code:

::-webkit-scrollbar{
width:#px;
height:#px;
}
::-webkit-scrollbar-track{
background:COLOR_OR_IMAGE_1;
}
::-webkit-scrollbar-thumb{
background:COLOR_OR_IMAGE_2;
}

This can get much more elaborate than Internet Explorer's scrollbars, since with this you actually have some options besides just colors. For an extremely basic scrollbar, you can follow that code exactly, just switching out #px in both the height and width property for another value that determines how wide the scrollbars are. It's best to keep them both the same, since width refers to vertical scrollbars only, and height refers to horizontal scrollbars only; and switching out COLOR_OR_IMAGE_# for the color (RGB/RGBA, hex, or by name) or image ( url('your image url here') ) value of your choice. The alpha channel of RGBA color, which allows the scrollbar color to be semi-transparent, does work in this case, but not on the main scrollbar at the side of the page— only on the ones that are on smaller elements.

If you want to get more creative, you can add other properties to the track and thumb selectors— some of the most useful being border, box-shadow:inset (only really works with inset shadows. Outset ones tend to act a bit strange), or border-radius.

[kittymmeow]

[kittymmeow]

[kittymmeow]

[kittymmeow]