---
title: "Add a Custom Scrollbar to Joomla - Code Snippets"
description: "Give your Joomla site a scrollbar in your brand colors, a small detail that makes the whole site feel finished, using one CSS snippet."
url: "https://www.tassos.gr/docs/code-snippets/howto/user-experience/custom-scrollbar"
date: "2026-10-22T23:49:49+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/docs) / [ Code Snippets ](https://www.tassos.gr/docs/code-snippets) / [ How-to Guides ](https://www.tassos.gr/docs/code-snippets/howto) / [ User Experience ](https://www.tassos.gr/docs/code-snippets/howto/user-experience)

#  Add a Custom Scrollbar to Joomla

##  Give your Joomla site a scrollbar in your brand colors, a small detail that makes the whole site feel finished, using one CSS snippet.

 ![Add a Custom Scrollbar to Joomla](https://www.tassos.gr/images/2026/10/code-snippets-custom-scrollbar-card.png)The browser's default scrollbar is grey and looks the same on every site. Matching it to your brand colors is a small detail that makes a site feel finished, and modern browsers let you do it with a few lines of CSS. You can add them to your Joomla site with one CSS snippet in Code Snippets, without touching your template.

## [The snippet code](#the-snippet-code)

This CSS snippet sets the colors of the scrollbar and makes it slimmer. It uses the standard `scrollbar-color` and `scrollbar-width` properties that Chrome, Edge, and Firefox support, plus a fallback for browsers that only understand the older `::-webkit-scrollbar` styles.

```
/* Scrollbar colors: change these to match your brand. */
:root {
  --scrollbar-thumb: #4f46e5;

  --scrollbar-track: #eef0f4;

}

/* Chrome, Edge, Firefox and other modern browsers */
html {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  /* Use "auto" for a regular width or "thin" for a slim scrollbar. */
  scrollbar-width: thin;
}

/* Browsers without scrollbar-color support, such as older Safari */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 10px;
    border: 2px solid var(--scrollbar-track);
  }
}
```

Change `--scrollbar-thumb` and `--scrollbar-track` to your own colors. The thumb is the part that moves, and the track is the strip behind it. Scrollable boxes inside your pages, like wide tables, pick up the same colors.

Phones and tablets show their own thin scrollbar only while you scroll, so the change mostly shows on desktop.

## [How to add this snippet](#how-to-add-this-snippet)

1. Install [Code Snippets](https://www.tassos.gr/docs/code-snippets/getting-started/how-to-install) if it isn't installed already.
2. Log into your Joomla backend.
3. Go to **Components** → **Tassos Code Snippets**.
4. Click **New**.
5. Enter a title, for example *Custom scrollbar*.
6. Set **Code Type** to **CSS**.
7. Set **Insertion Method** to **Auto-Insert Locations**.
8. Set **Location** to **Site Header**.
9. Paste the code above into the editor.
10. Click **Save & Close**.

## [Check that it works](#check-that-it-works)

1. Open a long page on your site in a desktop browser.
2. Look at the scrollbar on the right edge of the window.

It should now use your colors. If it still looks grey, clear your browser cache and reload the page.

To learn more about CSS snippets, read the [CSS snippet docs](https://www.tassos.gr/docs/code-snippets/types/css).

 Last updated on Oct 15th 2026 12:10