Scrollbar Tidbits

Although it is a seemingly simple convenience, the scrollbar can be influenced in various ways with CSS by the web page designer.

The bottom scrollbar and the right scrollbar can be controlled individually. Scrollbars can be allowed or disallowed, statically or conditionally. A gutter can be specified so the appearance of the right scrollbar does not cause the content to reflow.

As of this writing, only Firefox recognizes the CSS for scrollbar colors and scrollbar width. Other browsers ignore those declarations.

Not all browsers react the same to the CSS declarations. Some phones and tablets, for example, disappear the scrollbar until the user swipes something that is scrollable.

Likely, most of you are site developers or programmers. People like you are the ones who find value in Willmaster.com. Some of the information in this article will be things you have known for years. Others may be new.

Property `overflow`

The CSS overflow property may be the most familiar of all. Each of the four possible values affects scrollbars.

The value visible hides scrollbars and, if there is more content than fits in the container, the excess is published outside the container's boundaries.
```
<div style="overflow:visible;">
[CONTENT]
</div>
```
Where software gets made.

Where ease of use is a priority.

Where you matter.

Where things just work.

The programmer has
(drumroll)
34 years experience.

The value visible is default.
The value hidden also hides scrollbars. Any excess is hidden.
```
<div style="overflow:hidden;">
[CONTENT]
</div>
```
Where software gets made.

Where ease of use is a priority.

Where you matter.

Where things just work.

The programmer has
(drumroll)
34 years experience.
The value scroll presents scrollbars, whether or not they are needed for excess content.
```
<div style="overflow:scroll;">
[CONTENT]
</div>
```
Where software gets made.

Where ease of use is a priority.

Where you matter.

Where things just work.

The programmer has
(drumroll)
34 years experience.

Notice the scrollbar track along the bottom, even though it is not needed.
The value auto presents scrollbars only when needed.
```
<div style="overflow:auto;">
[CONTENT]
</div>
```
Where software gets made.

Where ease of use is a priority.

Where you matter.

Where things just work.

The programmer has
(drumroll)
34 years experience.

Properties `overflow-x` and `overflow-y`

There are two CSS properties closely related to overflow. They are overflow-x and overflow-y and they can use the same values as the overflow property — although only scroll and auto are mentioned here.

The declaration overflow-x:scroll will publish a bottom scroll whether or not it is needed. And the declaration overflow-x:auto will publish a bottom scroll only if it is needed.
```
<div style="overflow-x:scroll;">
[CONTENT]
</div>

<div style="overflow-x:auto;">
[CONTENT]
</div>
```
The property overflow-y is similar but affects the scrollbar on the right edge of the container. The declaration overflow-y:scroll will publish a right scroll regardless. And the declaration overflow-y:auto publishes it only if needed.
```
<div style="overflow-y:scroll;">
[CONTENT]
</div>

<div style="overflow-y:auto;">
[CONTENT]
</div>
```

Property `scrollbar-gutter`

While testing this, I noticed that some browsers treat the scrollbar-gutter property different than others do. The following is how it generally is expected to be.

When the content changes within a container and the container has scrollbar:auto or scrollbar-y:auto specified, the vertical scrollbar can appear/disappear as it is needed/unneeded. This can cause the content within the container to reflow because the amount of horizontal space has changed.

The scrollbar-gutter property can eliminate the reflow. What scrollbar-gutter does is make room for the scrollbar even when the scrollbar is not present. That eliminates the content reflow.

The scrollbar-gutter:stable; declaration provides enough right-margin so a scrollbar can appear or disappear without reflowing the content.

The scrollbar-gutter:stable both-edges; declaration provides the right margin but also provides the same left margin for centering the content.

Here are illustrations to show the differences.

Shortened content, no scrollbar-gutter

Where software gets made.

Where ease of use is a priority.

Shortened content, with scrollbar-gutter:stable;

Where software gets made.

Where ease of use is a priority.

Shortened content, with scrollbar-gutter:stable both-edges;

Where software gets made.

Where ease of use is a priority.

Longer content with scrollbar-gutter:stable;

Where software gets made.

Where ease of use is a priority.

Where you matter.

Where things just work.

The programmer has
(drumroll)
34 years experience.

Property `scrollbar-color` (Firefox Only)

The scrollbar-color property sets the color for the scrollbar thumb and scrollbar track.

Note: Currently, it only works in the Firefox browser. In other browsers, the scrollbar publishes with default colors.

This code sets the thumb to #399ee2 (a color from the logo in the illustration) and the track to beige when viewed in a Firefox browser. The code is followed by an example.

<div style="scrollbar-color:#399ee2 beige;">
[CONTENT]
</div>

Screenshot from a Firefox browser:

Property `scrollbar-width` (Firefox Only)

The scrollbar-width property sets the maximum thickness of the scrollbars. There are three possible values.

Note: Currently, scrollbar-width only works in the Firefox browser. In other browsers, the scrollbar publishes with their default width.

With the scrollbar-width:none; declaration, no scrollbars are shown, but the content in the container is still scrollable by finger swipe or mouse scroll.
```
<div style="scrollbar-width:none;">
[CONTENT]
</div>
```
Screenshot from a Firefox browser:
With the scrollbar-width:thin; declaration, a thinner than normal scrollbar is published..
```
<div style="scrollbar-width:thin;">
[CONTENT]
</div>
```
Screenshot from a Firefox browser:
With the scrollbar-width:auto; declaration, the width of the scrollbar is the normal width the browser would provide.
```
<div style="scrollbar-width:auto;">
[CONTENT]
</div>
```
It looks like whatever the browser's default scrollbar is, whether Firefox or your current brand of browser.

Where software gets made.

Where ease of use is a priority.

Where you matter.

Where things just work.

The programmer has
(drumroll)
34 years experience.

You are now aware of several ways to affect the scrollbar with CSS. The scrollbar tidbits come in handy when there is a special instance where more control is needed.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.