css - Scrollbar Styling

CSS Scrollbar Styling allows you to customize the appearance of scrollbars to match your website design. It improves the visual look and user experience of scrolling.

1. Why Scrollbar Styling is Used

By default, scrollbars look plain and differ across browsers.
Using CSS, we can:

• Change scrollbar color
• Adjust width
• Style the thumb and track
• Match website theme

2. Important Scrollbar Pseudo-Elements (WebKit Browsers)

Works in Chrome, Edge, Safari (not fully in Firefox).

3. Simple Example

HTML:

<div class="box">

  This is a long content area where scrollbar styling will be applied.

</div>

CSS:

.box {

  width: 300px;

  height: 150px;

  overflow-y: scroll;

}

/* Scrollbar width */

.box::-webkit-scrollbar {

  width: 8px;

}

/* Scrollbar track */

.box::-webkit-scrollbar-track {

  background: #f1f1f1;

}

/* Scrollbar thumb */

.box::-webkit-scrollbar-thumb {

  background: #4caf50;

  border-radius: 10px;

}

.box::-webkit-scrollbar-thumb:hover {

  background: #388e3c;

}

4. Scrollbar Styling for Firefox

.box {

  scrollbar-width: thin;

  scrollbar-color: #4caf50 #f1f1f1;

}

5. Where It Is Used

• Chat boxes
• Content panels
• Dashboards
• Side menus
• Blog layouts

6. Advantages

• Improves UI look
• Matches website theme
•   Better user experience
•  Easy to implement
• Works with most modern browsers

Conclusion

CSS Scrollbar Styling is a simple but powerful feature that helps you design modern, attractive scrollbars instead of default boring ones