Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 16, 2021 11:01 am GMT

Customize the scrollbar on a website

Hello everyone, today we meet for a new tutorial, as you saw in the title, today I will learn you to customize the scrollbar of a website. This tutorial only works on some web browsers that allow this feature : Google Chrome, Microsoft Edge, Opera, and Safari. Firefox and Internet Explorer do not allow you to customize your scroll bar. But don't worry, just because Firefox and Internet Explorer don't allow this feature doesn't mean it will display poorly, users simply won't be able to see your beautiful scroll bar . You're ready, so let's go.

The basics

To customize a scrollbar on a browser, you have to use the pseudo-element ::-webkit-scrollbar, which allows to modify the style of the scrollbar.

To modify a scrollbar, there are about 7 different selectors, some properties being less interesting than others, we will focus on three properties for this tutorial, which are the following :

  • ::-webkit-scrollbar which represents the entire scrollbar. We can define with this property the width of our scrollbar.
  • ::-webkit-scrollbar-thumb which is the scrollbar. For this pseudo-element, we can apply a multitude of different parameters to apply a style: gradients, colors, border-radius, :hover...
  • ::-webkit-scrollbar-track which is the track (the progress bar) of the scrollbar, we can apply the background property.

Implementation

Now that we have seen the main properties for styling a scrollbar, we will put into practice what we have just seen through an example.

We will start with a simple HTML base, as follows:

<body>  <h1>I'm the title</h1>  <!-- Put a lot of text here, so that the page has to be scrolled to be seen in full. -->  <p>[YOUR TEXT]</p></body>

Let's apply some styling to our Cascading Style Sheet :

body{  background: #252525;  color: white;  margin: 20px 5%;}h1{  text-align: center;}p{  width: 800px;  max-width: 95%;  text-align: justify;  margin: 0 auto;}

And we put into practice the different properties seen previously (still in our CSS file ) :

::-webkit-scrollbar {  width: 10px;  height: 10px;}::-webkit-scrollbar-thumb {  background: rgba(8, 8, 8, 0.58);  transition: all 0.15s ease-in-out;}::-webkit-scrollbar-track {  background: transparent;}

You can see the result of our piece of code below, where I replaced the '[YOUR TEXT]' with a Lorem Ipsum :

Finishes

For a cleaner page, we can apply the CSS property overflow: overlay; to our body which will allow our scrollbar to be inside our page.

We will also refine our scollbar by applying a border-radius and a dynamic effect on mouse-over.

You can see the changes in our CSS code below :

body{  overflow: overlay;  background: #252525;  color: white;  margin: 20px 5%;}h1{  text-align: center;}p{  width: 800px;  max-width: 95%;  text-align: justify;  margin: 0 auto;}/* Scrollbar */::-webkit-scrollbar {  width: 10px;  height: 10px;}::-webkit-scrollbar-thumb {  background: rgba(125, 125, 125, 1);  border-radius: 12px;  transition: all 0.15s ease-in-out;}::-webkit-scrollbar-thumb:hover {  background: rgba(157, 157, 154, 1);}::-webkit-scrollbar-track {  background: transparent;}

The result with its finishes :

I hope this tutorial has helped you create your custom scrollbar, feel free to give me your feedback in comments !


Original Link: https://dev.to/clementgaudiniere/customize-the-scrollbar-on-a-website-gh1

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To