While browsing online there is a tool that constantly accompanies us and that influences the appearance of our web pages. I'm talking about the navigation scrollbar, many do not know that it is possible to customize this element in order to obtain the desired look and improve the aesthetic rendering of Internet pages.
In this article we will see how it is possible to customize the navigation scrollbar using the CSS code.
Let's start by creating a new HTML document and setting up the page structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to change the style of the scrollbars</title>
</head>
<body>
</body>
</html>
Once this is done, we insert some elements into the page in order to increase the height of the document and activate the vertical navigation scrollbar.
<body>
<p>
By clicking “Accept All” you agree to these purposes. For more information, to provide or withdraw
consents for processing your personal data, click “Manage Cookies+.” Additionally, you may exercise
your preferences for consent at a vendor level in the “Vendors” link. These settings are accessible
on a site or app specific basis, at any time through the ‘Manage Cookies+’ link located at the
footer of webpages or in application settings. We work in coordination with an industry framework
which will signal your preferences to our participating vendors.Vendors
</p>
/*….we copy the paragraph several times to increase the height of the page*/
</body>
Then we use the <style></style> tag to define the first style rules in relation to the body and
Now it's time to work on the navigation scrollbar by acting on the following CSS rules that we insert
inside the <style></style> tag
html::-webkit-scrollbar {
width: 20px;
}
In this way we are defining the width of the bar which must be 20px wide.
track and thumb
Now let's go into even more detail and analyze the two main elements that allow you to customize navigation, the element called track and the thumb element.
Working on the first element, i.e. track, it is possible to define the style of the macro vertical section. In this case we assign the background color #ccc and a slight inner shadow.
In addition to acting on the browser scrollbar, it is possible to customize a <div></div> element to which the overflow: scroll property has been assigned by recalling the name of the element and subsequently adding the ::-webkit-scrollbar rule.
We offer an example to better understand. Let's create a <div></div> element detached from the default vertical navigation and start customizing the internal scrollbar. The newly created element must have an ID or CLASS name that distinguishes it and allows it to be called with CSS.
<div class="container">
<p>
By clicking “Accept All” you agree to these purposes. For more information, to provide or withdraw
consents for processing your personal data, click “Manage Cookies+.” Additionally, you may exercise
your preferences for consent at a vendor level in the “Vendors” link. These settings are accessible
on a site or app specific basis, at any time through the ‘Manage Cookies+’ link located at the footer
of webpages or in application settings. We work in coordination with an industry framework which will
signal your preferences to our participating vendors.Vendors
</p>
/*….we copy the paragraph several times to increase the height of the page*/
</div>
Now customize the style by first acting on the <div class="container"></div> element and indicating the size of the container within which the internal elements must be present.
As you may have noticed, unlike the first example, in this case we have rounded the corners of the scrollbar.
This means that it will be possible to further customize this element and make it coordinated with the aesthetic aspect of the Web pages or Internet sites that we are developing.
Let's continue and see how to further customize the scrollbar.
Let's change the properties inserted inside our container and replace the thumb element with an image of our liking.
In this case we have always acted on the thumb element, however assigning a customized vertical gradient and thus obtaining the desired aesthetic aspect.