Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




Hiding your face is not a solution!

Publish perfectly-optimized content in 1-click









 
 
 

How to change the style of the scrollbars

 

 
How to change the style of the scrollbars
 

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
the paragraph inserted inside it.
body{
margin: 0px;
background-color:f1f1f1;
}
p{
margin: 50px;
}


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.

html::-webkit-scrollbar-track {
background: #ccc;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}


 
How to change the style of the scrollbars
 

Acting instead on the second element, thumb, we can indicate all the details that the movable component must have.

html::-webkit-scrollbar-thumb {
background: #0066ce;
}


 
How to change the style of the scrollbars
 

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.
.container {
width: 500px;
height: 300px;
margin: 50px;
overflow: auto;
padding: 20px;
background-color: #fff;
}


Subsequently, as previously done, we can assign the style to the elements that characterize the scrollbar by indicating the name of our container.

.container::-webkit-scrollbar {
width: 12px;
}
.container::-webkit-scrollbar-track {
background-color: #ccc;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.container::-webkit-scrollbar-thumb {
background-color: #0066ce;
border-radius: 10px;
}


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.

.container::-webkit-scrollbar {
width: 30px;
}
.container::-webkit-scrollbar-track {
background-color: transparent;
}
.container::-webkit-scrollbar-thumb {
background-image: url('arrow-down.png');
background-repeat: no-repeat, no-repeat;
background-size: 30px;
}


By assigning background-image to the thumb element, the element looks like our image.
The result we will get will be the following:

 

The gradient property

 
Let's see one last example and create a scrollbar with gradient coloring by applying the gradient property to it as follows:
.container::-webkit-scrollbar {
width: 12px;
border-radius: 10px;
}
.container::-webkit-scrollbar-track {
border-radius: 10px;
border: 1px solid #cacaca;
background-color: #f1f1f1;
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}
.container::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
border-radius: 10px;
}



In this case we have always acted on the thumb element, however assigning a customized vertical gradient and thus obtaining the desired aesthetic aspect.

It might also interest you


How can we do animations with only CSS

How to create horizontal menu in CSS

How to create menu with css and javascript

How do you make a border radius round in CSS?

How to create sign up form with HTML and CSS

How To make a responsive website

How to create GLITCH effect with CSS

How to create a Focus effect on hover using CSS

How to create a footer using Bootstrap: tutorial and example


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...     
close publicity
TRAIN INTENSELY LIKE NEVER BEFORE AND PUSH YOUR LIMITS!