QP School

Full Version: CSS Custom Scrollbar Styles (Webkit and Firefox)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Description:

You can customize scrollbar styles for WebKit-based browsers and Firefox using vendor-specific pseudo-elements and properties.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Custom Scrollbar Styles Example</title>
  <style>
    /* WebKit (Chrome, Safari) Scrollbar Styles */
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background-color: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #888;
    }

    /* Firefox Scrollbar Styles */
    /* Note: The scrollbar styles for Firefox require Gecko engine version 64 or higher */
    scrollbar-width: thin; /* auto or thin */
    scrollbar-color: #f1f1f1 #888; /* track color, thumb color */
  </style>
</head>
<body>
  <div style="height: 300px; overflow-y: auto;">
    <!-- Add long content to enable scrollbar -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
</body>
</html>

Explanation:

In this example, we customize scrollbar styles for both WebKit-based browsers (using ::-webkit-scrollbar pseudo-elements) and Firefox (using non-standard CSS properties scrollbar-width and scrollbar-color). The ::-webkit-scrollbar styles for WebKit browsers are similar to the earlier scrollbar styling example, while the scrollbar-width and scrollbar-color properties for Firefox allow you to set the width and colors of the scrollbar.