Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Custom Scrollbar Styles (Webkit and Firefox)
#1
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.
Also follow me on Youtube for videos about video games:
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  CSS Grid Masonry Layout Qomplainerz 0 642 07-26-2023, 07:54 PM
Last Post: Qomplainerz
  CSS Box Decoration Break Qomplainerz 0 376 07-26-2023, 07:49 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 358 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 365 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 361 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Scrollbar Styling Qomplainerz 0 368 07-26-2023, 07:43 PM
Last Post: Qomplainerz
  CSS Grid Auto-fit and Minmax Qomplainerz 0 347 07-26-2023, 07:41 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 375 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  Custom font loading in CSS3 Qomplainerz 0 331 07-26-2023, 07:34 PM
Last Post: Qomplainerz
  CSS Feature Queries Qomplainerz 0 331 07-26-2023, 07:05 PM
Last Post: Qomplainerz

Forum Jump:


Users browsing this thread: 1 Guest(s)