Add a Custom Scrollbar to Joomla

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

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

1. Install Code Snippets 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

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.