Changing the scroll bar on your Duda Websites.

Aj_Pfeil
Aj_Pfeil Member Posts: 229 MVP
edited January 21 in Discussions

Changing the scroll bar on your Duda Websites.

Aj Pfeil

As an agency, one of our favorite things to do is think outside the box and figure out ways to make our small business client’s websites stand out. We believe in and love simplicity and never try to put too much on a website so that it does not become too overbearing, or distracting. We have found that with very small code snippets, we can add some awesome flair to our Duda websites. One of the coolest things we do is  change the Website Scrollbar that you see on your desktops and laptops. 

What is the scrollbar?

The website scrollbar is the bar on the side of the website that moves up and down as you scroll through the website. Scroll bars are not just limited to the sides of websites. They can also be on your Duda Popups, or anything else may cause “Overflow”. Overflow can be nice in some situations however, with simplistic and minimalistic websites, we try to avoid it. Below you can see some examples of scrollbars on websites.


 What is the point? 

Well, we don’t believe there needs to be one. This is just something we do, to add a little extra to the website to give them and their business a little more personality. You may be surprised what happens when people visit a site and say “hey, that looks pretty cool.” That is all this is for. So, with that being said; Let’s just jump right into it. 

Understanding the parts of the scrollbar. 

The scrollbar will be broken down and designed based on 3 different parts:

  1. The handle: The handle is the actual part of the scrollbar that moves up and down (or right to left in some cases) to indicate where you are on the page. 
  2. The track: The track is exactly what it sounds like. It is the track in which the handle will move on. As you scroll, the handle will move up and down the track. 
  3. The scrollbar: The scrollbar is a combination of both the Handle and the Track together. There are a few properties that we can define in CSS that will alter both the Handle and the Track together, so for these we just use the scrollbar property. 


The Styling

Before we begin, please note that you can only style the website scrollbars if your browser allows it.

Note: ::-webkit-scrollbar is only available in Blink- and WebKit-based browsers (e.g., Chrome, Edge, Opera, Safari, all browsers on iOS, and others). A standardized method of styling scrollbars is available with scrollbar-color and scrollbar-width.

Below is some simple styling that we will apply to get the hang of what we are doing.

NOTE: If you are uncomfortable with Dev Mode; you can place the same code under Settings > Head HTML. Your settings will be on the left hand side of your site editor.  You do not have to jump into Dev Mode for this CSS Solution, it is simply where “WE” are comfortable working. 

We are going to be applying this code into the head-section.html file within dev mode. Click the Code (</>) icon at the top of your editor. 

Click on Site HTML/CSS then click on head-section.html

Everything that we add in this section will go between some CSS style Tags. 

<style> </style> 

The entire code snippet is at the end of this article. 

We want to apply a total width to the entire scrollbar using the scrollbar property we were mentioning earlier. It will look something like this. 

/* width */
::-webkit-scrollbar {
  width: 10px !important;
}

With this snippet, we are going to ensure that the HANDLE and the TRACK are both 10px wide, and as always with Duda we add the “!important” tag.

NOTE: The use of !important is not required for this feature. We always use it when we write custom CSS for Duda, that is just us.  

With the width defined, we can now start designing the track, and the handle of our scroll bars. 

We want the handle to stand out on the track and we found a great way to do this is to have a transparent track. We will cover two different track styles so you can see the difference on your Duda sites. 

We design the track with the following simple CSS. 

/* Track style number one with transparent background*/
::-webkit-scrollbar-track {
    background-color: transparent !important;
}

The first style has a transparent background. The track will have NO COLOR. Therefore, you will not see it at all. If you do not style it like this, your track will inherit the default styling that all scrollbars look like. Moving on to style number two.

/* Track style number two with shadow inset background*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey !important; 
  border-radius: 10px !important;
}

This style has a simple inset shadow on the track to make it stand out. You can add a background-color: property if you wanted to, but with such a slim scrollbar, we found the shadow works just fine. We also added a small border-radius of 10px to the track to add a little curvature to the design. 

The next step will be to design the handle of the scrollbar. Remember, the handle is the part that actually moves along the track to show site visitors where they are on the page. This is the part that needs to POP off the track so to speak. We want this to stick out. You also want to try and keep it BRAND CONSISTENT

“Brand consistency is critical to any business that expects to be successful. Brand consistency is all about helping to establish trust with consumers. When your logo, colors, fonts, and messaging are consistently the same across all mediums, it creates a feeling of familiarity and trust with the consumer. Inconsistency, on the other hand, has the opposite effect and creates confusion and distrust."

Lisa M. Dye – President & Chief Happiness Officer – Infinity Medical Marketing

Style the handle, with any colors, or radius you like. We are going to have a Basic Style, as well as a hover style for the handle. This way when visitors hover over to move the handle manually, it will change colors. 

/* Handle */
::-webkit-scrollbar-thumb {
  background: #5c37d0 !important; 
  border-radius: 10px !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #2d0c97 !important; 
  transition: 0.2s ease all !important;
}

Adding a hover color will allow the handle to change when the user hovers over it. 

The Full Snippets

Below you will find the entire code snippet for one awesome looking scrollbar on your Duda Sites. Make sure you add it to the head-section.html portion in Dev Mode as mentioned above. Be sure to look at the widths, colors, and radiuses and to alter them to your clients liking. 

<style>
/* width */
::-webkit-scrollbar {
  width: 10px !important;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey !important; 
  border-radius: 10px !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #5c37d0 !important; 
  border-radius: 10px !important;
  transition: 0.72s ease all !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #2d0c97 !important; 
}
</style>

Conclusion

Small changes, with little effort can make a HUGE IMPACT on your Duda websites. Learn a little bit of simple CSS and HTML to increase the eye-catching appeal of your Duda sites. 

If you have any questions, or concerns, drop them in the comments below.