CSS to Always Show Scrollbar

Scrollbars don’t always behave the same way across browsers and operating systems. By default, many modern environments (especially macOS) only show scrollbars when you actively scroll. If you want scrollbars to always be visible, you must force them with CSS or custom styling.

Step 1. Create a Scrollable HTML Structure

Here is a simple HTML example that we’ll use throughout the tutorial:

<!-- A scrollable list of comments -->
<div class="comment-list" tabindex="0" aria-label="List of comments">
  <div class="comment">Comment 1</div>
  <div class="comment">Comment 2</div>
  <div class="comment">Comment 3</div>
  <div class="comment">Comment 4</div>
  <div class="comment">Comment 5</div>
  <div class="comment">Comment 6</div>
  <div class="comment">Comment 7</div>
  <div class="comment">Comment 8</div>
  <div class="comment">Comment 9</div>
  <div class="comment">Comment 10</div>
  <div class="comment">Comment 11</div>
  <div class="comment">Comment 12</div>
</div>

Explanation

• <div class="comment-list"> is the container. We will style this to be scrollable.
• tabindex="0" makes the container keyboard-focusable so you can scroll using the keyboard.
• aria-label="List of comments" provides accessibility for screen readers.
• The child elements (.comment) create enough content to overflow the container so the scrollbar can be demonstrated.

Step 2. Basic CSS to Force a Scrollbar

Now we make the container scrollable and ensure that the scrollbar is always reserved.

.comment-list {
    height: 300px;          /* fixed height */
    border: 1px solid #ddd; /* border for visibility */
    padding: 10px;          
    overflow-y: scroll;     /* force vertical scrollbar */
    overflow-x: hidden;     /* hide horizontal scrollbar */
}

• height: 300px; restricts the container height so it can overflow.
• overflow-y: scroll; guarantees that the vertical scrollbar space is always there, even if content is short.
• overflow-x: hidden; prevents a horizontal scrollbar from showing.

Step 3. Custom Scrollbar Styling (WebKit Browsers)

On Chrome, Edge, and Safari, you can use the ::-webkit-scrollbar family of pseudo-elements to make the scrollbar track visible at all times.

/* Style the vertical scrollbar */
.comment-list::-webkit-scrollbar {
    width: 12px; /* scrollbar thickness */
}

/* Always show the track */
.comment-list::-webkit-scrollbar-track {
    background: #f0f0f0;
}

/* Style the draggable thumb */
.comment-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

.comment-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

Here, the track is styled with a light background, so the scrollbar area is always visible, even if there is nothing to scroll.

Step 4. Stabilize Layout with scrollbar-gutter (Modern Browsers)

If your browser supports it (Chrome, Edge, Firefox), you can keep the scrollbar gutter space stable using:

.comment-list {
    scrollbar-gutter: stable;
}

This prevents layout shifts when a scrollbar appears or disappears. Safari doesn’t support this yet.

Step 5. OS-Level Limitation (Important)

On macOS, if the system setting is System Settings → Appearance → Show Scroll Bars → When Scrolling, no CSS can override it. The user must switch to Always for a permanently visible native scrollbar.

Final Combined CSS Example

.comment-list {
    height: 300px;
    border: 1px solid #ddd;
    padding: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable; /* supported in most modern browsers */
}

/* Custom scrollbar for Chrome/Edge/Safari */
.comment-list::-webkit-scrollbar {
    width: 12px;
}
.comment-list::-webkit-scrollbar-track {
    background: #f0f0f0;
}
.comment-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}
.comment-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

✅ With this setup, the scrollbar space is always present, the track is always visible (in browsers that support it), and your layout doesn’t shift when content changes.