How to Customize the Scrollbar in CSS

Responsive Desktop-Only Scrollbar Styling

Mobile browsers such as Safari (iOS) and Chrome (Android) either hide the scrollbar or render it as a transparent overlay, which means CSS customization doesn’t apply there.

To keep the mobile experience clean and consistent, you can restrict your custom scrollbar to desktop screens only using a simple media query:

@media (min-width: 1024px) {
  :root {
    --scrollbar-track: #292929;   
    --scrollbar-thumb: #fff9b1;   
  }

  html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  ::-webkit-scrollbar {
    width: 10px;
  }

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

  ::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 6px;
  }
}

Where to add the code

You can safely paste this CSS snippet inside your theme’s Additional CSS section

(WordPress Dashboard → Appearance → Customize → Additional CSS),

or include it in your theme’s main stylesheet (style.css).

Customize Colors Easily

Since we used CSS variables, you can change the look by editing only two lines:

:root {
  --scrollbar-track: #111;
  --scrollbar-thumb: #00bcd4;
}

• The track represents the background area where the scrollbar moves — like a rail.
• The thumb is the draggable part that indicates the current scroll position.

You can adjust these two colors anytime without touching the rest of the code.