Scrollbars are essential components of graphical user interfaces (UI). Scrollbars allow users to view content that extends beyond the width or height of their containers. Scrollbars also enable users to view content that extends past the screen width or height. By default, the browser includes a scrollbar for overflow on the body content. In other cases, the UI developer has to set a scrollbar to enable users to view content extending beyond the screen or a particular container. Each browser has a set of default styles for scrollbars. In some cases, you may have a good reason to customize the scrollbars. For example, you can customize scrollbar styles to match the look and feel of the website.
In this article, we will look at when to set horizontal and vertical scrollbars, how to set them, and how to customize their appearance with CSS.
We will cover this topic in the following sections:
- Setting up a custom vertical scrollbar
- Setting up a custom horizontal scrollbar
- Customizing scrollbar styles
1. Setting up a custom vertical scrollbar
This is the most common type of scrollbar that users interact with on websites. The vertical scrollbar is so common because the browser sets a default vertical scrollbar for all websites. Apart from the default scrollbar, you can also set a custom vertical scrollbar within your website. A vertical scrollbar can help the users of your website view content that extends beyond the visible area of a container. For example, a sidebar navigation. You can style your sidebar to display a scrollable list of navigation items.
In this section, we will create a scrollable sidebar navigation as per the following steps:
- a) Create a navigation bar with navigation items
- b) Style the navigation bar into a sidebar
- c) Set the sidebar position to fixed
- d) Manage overflow of items using a scrollbar
a). Create a navigation bar with navigation items
To create a navigation bar, we will use the HTML nav element. Our navigation bar will contain the following items:
- Home
- Shop
- Markets
- Products
- Sellers
- Manufacturers
- Distributors
- Chain managers
- Banks
Our aim in this step is to create a navigation bar shown in the screenshot below:
The initial navigation bar with the above items can be created using the code snippet shown below:
<style>
a{
padding: 1rem;
color: rgb(38, 103, 216);
text-decoration: none;
}
</style>
<body>
<nav>
<a>Home</a>
<a>Shop</a>
<a>Markets</a>
<a>Products</a>
<a>Sellers</a>
<a>Manufacturers</a>
<a>Distributors</a>
<a>Chain managers</a>
<a>Banks</a>
</nav>
</body>
b). Style the navigation bar into a sidebar.
After creating our horizontal navigation bar, we can style it into a vertical sidebar before setting a vertical scrollbar.
The following screenshot shows the sidebar that we are about to create:
To create the above sidebar, we will make the following changes in CSS:
- Change the display of the navigation bar to flex with the direction set to column
- Set the background color for the sidebar
- Add a border to the bottom of the navigation links
- Increase font size and font weight of the navigation links
- Set a fixed width for the sidebar
- Increase the height of the body to make it long enough for scrolling
The CSS code snippet below describes how to style the initial navigation bar into a sidebar and adjust the margin-bottom of the body.
nav{
display: flex;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.1);
width: 20vw; // Set fixed width for sidebar
> a{
border-bottom: solid 2px gray;
font-weight: 500;
font-size: 1.8rem;
}
}
body{
margin-bottom: 200vh; //Adjust the bottom margin of the body
}
c). Set the sidebar position to fixed.
In this section, we'll focus on preventing the sidebar from moving when you scroll through the main content. We want to style the sidebar so that the body can scroll on its own without carrying the sidebar along with it.
The screenshot below shows the sidebar separated from the normal content flow:
The sidebar above has a fixed position. The body of the page continues to scroll but the sidebar remains within the user's view.
The following code snippet contains styles for setting the sidebar into a fixed position as shown in the above screenshot:
nav{
/* previous styles go here */
position: fixed;
top: 4rem;
bottom: 4rem;
left: 0;
}
In the code snippet above, we have set the sidebar distance from the top and bottom to 4rem. From the screenshot, the bottom of the sidebar doesn't look like it is set off the bottom. This is because the content is longer than the height of its container. In the next section, we will learn how to prevent the list of navigation items from displaying outside the sidebar.
d). Managing content overflow using a scrollbar
Preventing navigation items from displaying outside the sidebar is surprisingly easy. This can be done in one line of CSS code using the overflow-y property. Setting the overflow-y property to scroll creates a scrollable container for content exceeding its height. The items that extend beyond the sidebar will be obscured. A scrollbar will appear on the right side, allowing the users of your website to see everything.
The code snippet for hiding the extended content and showing the sidebar is as simple as shown below:
nav{
/* previous styles go here */
overflow-y: scroll;
}
More about the overflow-y property.
The overflow-y property accepts either of the two values; scroll or auto. Setting the value of the property to scroll instructs the browser to always add a scrollbar to the container. The container will always have a scrollbar whether it has content extending past its boundaries or not. On the other hand, if you set the value of the overflow-y property to auto, the browser will not add the scrollbar unless the target container has extended content. With the value of the overflow-y property set to auto, the browser will hide the scrollbar if there is no content extending beyond the boundaries of the container.
Congratulations! You have successfully created a vertical scrollbar. Take a break if you need one. In the next section, we will learn how to set a horizontal scrollbar.
2. Setting a custom horizontal Scrollbar.
You can add a horizontal scrollbar to a container within your webpage. The horizontal scrollbar can enable users to view a long series of horizontal content within a shorter container.
The screenshot below shows an orange container with a series of blue squares that extend beyond its width. The container would look much better if the container had a horizontal scrollbar.
Below is the code snippet for the above layout:
<style>
.container{
display: flex;
flex-direction: row;
width: 60%;
margin: auto;
margin-block-end: 6rem;
gap: .5rem;
padding: 1rem;
background-color: rgb(226, 150, 9);
}
.box{
min-width: 200px;
height: 200px;
background-color: rgb(0, 255, 213);
width: 100%;
padding: 4rem;
font-size: xx-large;
}
</style>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
</div>
</body>
The page has a default horizontal scrollbar at the bottom left corner of the screen but you don't want the users of your website to use this. Relying on the default scrollbar would mean that the users will have to scroll the whole page horizontally to see full content. The users will also be scrolling through content that does not need to be scrolled.
Your goal is to make sure that the blue squares can only be viewed within the orange container as shown in the layout below.
In the previous section, we added a scrollbar by setting the value of the overflow-y property to scroll. You can guess what this is going to be. You got it. The property is called overflow-x.
Set the value of the overflow-x property to scroll to make the container items scrollable as shown in the code snippet below.
.container{
/*previous container styles go here */
overflow-x: scroll; //Managing oveflow with scroll.
}
By setting the the value of overflow-x property to scroll, a horizontal scrollbar is added to the bottom of the container. The users of your website will be able to smoothly scroll through the content in the container.
You have successfully created both horizontal and vertical scrollbars. Let us move to the next section where we are going to discuss how to style the scrollbars.
3. Customizing scrollbar styles
One of the reasons why you would want to style the scrollbars of your website is to attain color harmony on the entire webpage. You may want to keep the number of colors used on your website to a set minimum. You may also want to use a different color for the scrollbar to make it easy to notice.
When styling the scrollbar, we can set desired values to the following properties:
-
width- the thickness of a vertical scrollbar -
height- the thickness of a horizontal scrollbar -
background-colorof the scrollbar-thumb - the object that moves back and forth on a scrollbar as you scroll -
background-colorof thescrollbar-track- the path along which thescrollbar-thumbmoves -
border-radiusforscrollbar-track, orscrollbar-thumb, or both. Theborder-radiusproperty smoothens the extreme ends of the scrollbar component that it is set on.
In this section, we will explore the different ways of styling scrollbars as listed below:
- a) Styling a specific scrollbar.
- b) Styling the default scrollbar separately.
- c) Styling all scrollbars at once
a). Styling a specific scrollbar.
There is an easy way to set specific styles to different an individual scrollbar on a website. This involves adding styles through the container that the scrollbar is set on. You can select the container by tag name or by class name and assign styles to it.
In this section, we will style the vertical scrollbar (sidebar) and the horizontal scrollbar (flexbox) separately.
Styling vertical scrollbar (sidebar scroll)
We will set the following styles on the sidebar (vertical) scrollbar.
- Set the
background-colorof thescrollbar-trackto blue - Set the
background-colorof thescrollbar-thumbto green - Set the
width(thickness) of the scrollbar to 12px - Set the
border-radiusof thescrollbar-trackandscrollbar-thumbto 12px.
The result we aim to create is shown in the screenshot below:
The following code snippet describes the styles used to achieve the above result:
nav::-webkit-scrollbar{
width: 12px;
}
nav::-webkit-scrollbar-track{
background-color: rgb(21, 146, 171);
border-radius: 12px;
}
nav::-webkit-scrollbar-thumb{
background-color: rgb(31, 125, 2);
border-radius: 12px;
}
In the above code snippet, we select the sidebar using the nav tag.
Styling the horizontal scrollbar (flexbox scrollbar)
Styling the horizontal scrollbar is similar to styling a vertical scrollbar except for one property. The height property is used to set the thickness of a horizontal scrollbar instead of the width property.
In this exercise, we'll reuse previous styles, but we will set the thickness of the scrollbar using the height as described below:
- Set the
background-colorof thescrollbar-trackto blue - Set the
background-colorof thescrollbar-thumbto green - Set the
height(thickness) of the scrollbar to 12px - Set the
border-radiusof thescrollbar-trackandscrollbar-thumbto 12px.
After applying the styles as described above, the final flexbox container scrollbar should appear as shown below.
Below is the code snippet for customizing the horizontal scrollbar:
.container::-webkit-scrollbar{
height: 12px;
}
.container::-webkit-scrollbar-track{
background-color: rgb(21, 146, 171);
border-radius: 12px;
}
.container::-webkit-scrollbar-thumb{
background-color: rgb(31, 125, 2);
border-radius: 12px;
}
In the above styles, we select the flexbox using its class name and apply styles to it.
b). Styling the default scrollbar
The default scrollbar appears on the right-hand side of a webpage. To style the default scrollbar, we select the body tag and add styles to it.
The screenshot below shows a default scrollbar with custom styles:
The code snippet below shows how you can add styles to the scrollbar using the body tag:
body::-webkit-scrollbar{
width: 12px;
}
body::-webkit-scrollbar-track{
background-color: rgb(21, 146, 171);
border-radius: 12px;
}
body::-webkit-scrollbar-thumb{
background-color: rgb(31, 125, 2);
border-radius: 12px;
}
c). Styling all scrollbars at once.
In most cases, you will prefer to maintain a consistent style across all the vertical and horizontal scrollbars on your website.
To achieve uniform customization across all scrollbars, we can apply styles as follows:
- Apply scrollbar styles without selecting any specific element, tag, or class name
- Assign values to both
heightandwidthproperties in the case where a website has both horizontal and vertical scrollbars.
The screenshot below shows horizontal and vertical scrollbars with consistent styles:
When applying CSS styles, make sure you set values for both the height and width properties. The value of the height will be applied to the thickness of the horizontal scrollbar. The value of the width will be applied to the thickness of the vertical scroll bar.
The following code snippet shows how you can apply styles to all scrollbars on the target webpage:
::-webkit-scrollbar{
height: 12px;
width: 12px;
}
::-webkit-scrollbar-track{
background-color: rgb(21, 146, 171);
border-radius: 12px;
}
::-webkit-scrollbar-thumb{
background-color: rgb(31, 125, 2);
border-radius: 12px;
}
Notice in the above code that this time we are not selecting any element or class in specific. The styles are global; and applicable to all scrollbars on the document.
Conclusion
Scrollbars are a great way to improve the responsiveness and accessibility of your web application. This article has covered how to set and customize the appearance of scrollbars on a web page. In this article we have learned the following:
- How to enable scrolling in containers with content that extends beyond their set boundaries.
- How to make a scrollbar permanently visible in a container even if the content fits perfectly.
- How to set a scrollbar that will only be visible if the content extends beyond the container.
- How to add custom styles to scrollbars.
We have also learned how to style scrollbars using the -webkit CSS prefix. Find out more about the -webkit CSS prefix in this article. There are other ways to style scrollbars. For example, this article from MDN describes a different way to style scrollbars. Note that scrollbar customizations may not work on all browsers. Visit this MDN doc to find out more about browser compatibility with the styling method described in this article.
Top comments (0)