How to Add a Custom Scrollbar in Cargo Site

Do you want to add a custom scrollbar in your Cargo site?

Changing how the scrollbar looks can help your site stand out, particularly if you are customizing your Cargo template. It can also draw the visitor’s attention to the scrollbar and encourage them to explore more of your content.

In this article, we will show you how to easily add a custom scrollbar in your Cargo site.

Table of Contents

Why Add a Custom Scrollbar in Cargo Site?

In 2018, a group called WC3 made a suggestion. They said that website owners can change how the scrollbar looks using CSS.

Nowadays, many new web browsers let you make your own scrollbar.

This is helpful if you want the scrollbar to match your site’s colors or style. Some sites use a special scrollbar to catch people’s attention, which can make them look at more pages and stay longer.

But not all web browsers show custom scrollbars the same way. Some may only show part of the changes, or not show them at all.

So, it’s a good idea to check your site on different browsers and devices to see how the scrollbar looks.

We are going to customize the Scrollbar for both Cargo 3 and Cargo 2 site using some CSS code which is pretty easy to customize.

Now, let’s learn how to make a custom scrollbar on your Cargo site.

Add Custom Scrollbar in Cargo 3

Follow the steps below to add Custom Scrollbar in Cargo 3.

Log in to your Cargo 3 editor.
Navigate to the site where you want to add the custom scrollbar.
On the right side of the editor, click on the rule icon (usually represented by a pencil or brush icon).
Then, go to the Global Code Editor.
Open the CSS section.
Add the following CSS code:


body {
  --sb-track-color: #f2ffa6; 
  --sb-thumb-color: #2dff96;
  --sb-size: 40px; 
  --sb-radius: 25px; 
  --sb-border-size: 2px;
  --sb-border-color: #000000;
}

body::-webkit-scrollbar {
  width: var(--sb-size);
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);

}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: var(--sb-radius);
  border: var(--sb-border-size) solid var(--sb-border-color);
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color)
                     var(--sb-track-color);
  }
}

This code sets various custom properties for the scrollbar, such as the track color, thumb color, size, radius, border size, and border color. It also styles the scrollbar for webkit-based browsers like Chrome and Safari.

Remember to save your changes after adding the CSS code. Once saved, the custom scrollbar should be applied to your Cargo 3 site.

Code Explaination:

body {
  --sb-track-color: #f2ffa6; 
  --sb-thumb-color: #2dff96;
  --sb-size: 40px; 
  --sb-radius: 25px; 
  --sb-border-size: 2px;
  --sb-border-color: #000000;
}

This part defines custom CSS variables for the scrollbar. These variables allow you to easily change the scrollbar’s appearance by adjusting their values. Here’s what each variable represents:

--sb-track-color: The color of the scrollbar track (the background behind the scrollbar).
--sb-thumb-color: The color of the scrollbar thumb (the draggable portion of the scrollbar).
--sb-size: The width of the scrollbar.
--sb-radius: The border radius (rounded corners) of the scrollbar thumb.
--sb-border-size: The size of the border around the scrollbar thumb.
--sb-border-color: The color of the border around the scrollbar thumb.

NOTE: To customize the scrollbar according to your requirements, you only need to change the values in the above provided code, such as –sb-track-color: #f2ffa6 etc. You don’t need to modify any other part of the code.

body::-webkit-scrollbar {
  width: var(--sb-size);
}

This part targets the default scrollbar in webkit-based browsers (like Chrome and Safari) and sets its width to the value of --sb-size.

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
}

This part styles the background of the scrollbar track using the --sb-track-color variable.

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: var(--sb-radius);
  border: var(--sb-border-size) solid var(--sb-border-color);
}

This part styles the scrollbar thumb using the --sb-thumb-color variable for its background color. It also sets the border radius, border size, and border color of the thumb using the corresponding variables.

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

This part is a fallback for browsers that do not support the ::-webkit-scrollbar selector. It sets the scrollbar color using the scrollbar-color property. However, this property is not widely supported, so it may not work in all browsers.

Overall, this CSS code allows you to customize the appearance of the scrollbar on your Cargo site by adjusting the values of the custom CSS variables.

Add Custom Scrollbar in Cargo 2

Follow these steps to add Custom Scrollbar in Cargo 2.

Log in to your Cargo 2 account.
Navigate to the site where you want to add the custom CSS.
Click on the “Design” tab.
Find and click on the “CSS Editor” option.
Paste the following CSS code into the editor:

body {
  --sb-track-color: #f2ffa6; 
  --sb-thumb-color: #2dff96;
  --sb-size: 40px; 
  --sb-radius: 25px; 
  --sb-border-size: 2px;
  --sb-border-color: #000000;
}

body::-webkit-scrollbar {
  width: var(--sb-size);
}

body::-webkit-scrollbar-track {
  background: var(--sb-track-color);

}

body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: var(--sb-radius);
  border: var(--sb-border-size) solid var(--sb-border-color);
}

This code will personalize the scrollbar on your Cargo 2 site based on the colors and dimensions you set for track-color, thumb-color, size, radius, border-size, and border-color. Ensure you modify these values to achieve the look you want before saving your changes.

Conclusion

In conclusion, adding Custom Scrollbar in Cargo Site is a simple way to enhance its appearance and match it to your brand’s style.

By adjusting the colors and dimensions in the provided CSS code, you can create a scrollbar that seamlessly integrates with your site’s design. Remember to test your site on different browsers and devices to ensure the scrollbar looks great everywhere. With these customization options, you can make your Cargo Site more visually appealing and user-friendly.

Ask your doubts in Support Forum.

Thanks for reading the blog.🚀