How to Change the Scrollbar on your Squarespace 7.1 Website

Customizing your scrollbar is a simple way to elevate your site’s aesthetic and make it uniquely yours.

Why add a custom scrollbar?

The goal when designing your site should be to create a cohesive brand experience for your audience. A scrollbar is something that will not automatically change with the rest of your Squarespace site, so without custom CSS, it can often get overlooked. But adding a small strip of custom code to your scrollbar will allow you to cohesively match your scrollbar with your brand design.

Show your visitors that you’ve thoughtfully crafted every aspect of their journey through your site.

Step 1: Access Your Custom CSS

1. In your Squarespace dashboard, navigate to the left sidebar under Website and click on Pages.

2. Scroll down and select Custom CSS to open the CSS editor.

Step 2: Add Your Code

Now, you’re going to add some CSS code to style your scrollbar. Don’t worry if you’re not a coding whiz – we’ll walk you through it!

1. Copy and paste the following code into the Custom CSS box:

::-webkit-scrollbar {
    width: 3px; /* Scrollbar Thickness */}

::-webkit-scrollbar-thumb {
    background: #1f1f1f; /* Scrollbar Color */
    border-radius: 25px; /* Rounded Corners */} 

  ::-webkit-scrollbar-track {
    background: #eae9e0; /* Background Color */}

2. Customize the colors to match your brand. For example, replace #eae9e0 with your brand’s primary color.

Step 3: Preview and Save

1. Take a look at the preview of your website to see your new scrollbar in action.

2. If everything looks great, click Save to apply the changes.

Adding code to your Squarespace website doesn’t need to be daunting and you can check out the rest of my Squarespace resources to help you get to grips with adding custom code to your website.

---

Frequently Asked Questions

• Will this customization affect my site's performance?

  Nope! Customizing your scrollbar with CSS has a minimal impact on your site’s performance.

• Can I revert to the default scrollbar if I change my mind?

  Absolutely! Simply remove the custom CSS code, and your scrollbar will return to its default style.

• Are there any restrictions on scrollbar customization in Squarespace?

  Customizing your scrollbar is relatively straightforward, but I recommend to always test changes across different devices when adding custom code to your site, to ensure a consistent user experience.