Website Scroll Bars

Customizing the scrollbar adds a unique touch to your website's design. With the CSS provided, you can change         the scrollbar’s color, size, and even its hover effects. By following this guide, you’ll learn how to apply         this code to your Duda website and personalize it to match your brand.

Step 1: Understanding the CSS Code

Below is the code snippet we’ll be using. Each part of the code is explained in detail to help you make adjustments:

  /* WEBSITE SCROLL BAR CSS */

::-webkit-scrollbar {

  width: 15px;

}

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 10px #eeeeee;

  border-radius: 5px;

}

::-webkit-scrollbar-thumb {

  background: #23a0a3;

  border-radius: 5px;

}

::-webkit-scrollbar-thumb:hover {

background: #1b7d7e;

}  

Explanation of Each Selector:

•   ::-webkit-scrollbar : This targets the scrollbar itself and allows us to set its width. Here, we set the  width   to  15px   . You can adjust this to make the scrollbar narrower or wider, depending on your design preference.
•   ::-webkit-scrollbar-track : This defines the track of the scrollbar—the area in which the scrollbar thumb moves. We use the  box-shadow   property to add a subtle inner shadow effect (  inset 0 0 10px #eeeeee   ), giving it a more defined, styled appearance. The  border-radius   of  5px   rounds the corners of the scrollbar track. Adjusting the radius here will make it more or less rounded.
•   ::-webkit-scrollbar-thumb : This targets the thumb(the part of the scrollbar you drag to scroll). We set the  background   color to  #23a0a3   (a teal color in this case). The  border-radius   of  5px   rounds the corners of the thumb, making it more visually appealing and matching the style of the track.
•   ::-webkit-scrollbar-thumb:hover : This modifies the thumb’s appearance when hovered over. We change the  background   color to a darker shade,  #1b7d7e   , to give users a visual cue when they hover.

Note: These properties apply to WebKit browsers like Chrome and Safari. Firefox and Internet Explorer require different properties, which aren’t supported in Duda at this time.

Step 2: Adding the Code to Your Duda Site

1. Navigate to Site CSS:

• In Duda’s editor, go to Dev Mode > site.css
• Alternatively, if you want this to apply only to a specific page, you can use the Page CSS section for that page.

1. Paste the Code: Copy the entire CSS code above and paste it into the CSS area.
2. Save and Preview: Save the changes and preview your site to see the custom scrollbar styling in action.

Step 3: Customizing the Scrollbar

The following are some adjustments you can make to personalize the scrollbar further:

• Scrollbar Width(  ::-webkit-scrollbar   ):
• Adjust  width: 15px;   to make the scrollbar thinner or thicker. For example, setting it to  10px   will create a slimmer scrollbar.
• Track Shadow Color and Radius(  ::-webkit-scrollbar-track   ):
• Modify  box-shadow: inset 0 0 10px #eeeeee;   to change the shadow’s color and strength.
• Change  #eeeeee   to any color that matches your site’s theme.
• Adjust  border-radius: 5px;   to control the roundness. A smaller number (e.g.,  2px   ) makes it less rounded, while a larger number (e.g.,  10px   ) makes it more rounded.
• Thumb Color and Radius(  ::-webkit-scrollbar-thumb   ):
• Change  background: #23a0a3;   to any color that aligns with your brand.
• Adjust  border-radius   similarly to control how rounded the thumb looks.
• Hover Effect(  ::-webkit-scrollbar-thumb:hover   ):
• The hover effect color (  #1b7d7e   ) provides visual feedback to users. Feel free to change this color to create contrast with the regular thumb color.

Example Customization

Let’s say you want a thinner scrollbar with a dark gray track and a blue thumb that turns light blue on hover.         

Here’s how that code might look:

::-webkit-scrollbar {

  width: 8px;

}

::-webkit-scrollbar-track {

  box-shadow: inset 0 0 5px #444444;

  border-radius: 2px;

}

::-webkit-scrollbar-thumb {

  background: #007bff;

  border-radius: 2px;

}

::-webkit-scrollbar-thumb:hover {

  background: #66b2ff;

}  

Step 4: Preview and Test Across Devices

After customizing the scrollbar, make sure to:

• Preview the site to ensure the scrollbar looks and functions as expected.
• Test on mobile and desktop to ensure the design feels right on different devices, even though custom scrollbars are primarily desktop features.

That’s it! With these steps, you now have a customized scrollbar that matches your Duda site’s design and enhances user experience. Enjoy experimenting with different styles and colors to find the perfect fit for your website!