Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Scrollbar Styling
#1
Description:

You can customize the appearance of scrollbars in modern browsers using the ::-webkit-scrollbar pseudo-element.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Scrollbar Styling Example</title>
  <style>
    /* Style the scrollbar track and thumb */
    ::-webkit-scrollbar {
      width: 10px;
    }
    ::-webkit-scrollbar-track {
      background-color: #f1f1f1;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #888;
    }
  </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 use the ::-webkit-scrollbar pseudo-element to style the scrollbar in WebKit-based browsers (e.g., Chrome, Safari). The ::-webkit-scrollbar allows you to customize the scrollbar's width and appearance. ::-webkit-scrollbar-track styles the track (the background area behind the thumb), and ::-webkit-scrollbar-thumb styles the thumb (the draggable scrolling handle).
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 644 07-26-2023, 07:54 PM
Last Post: Qomplainerz
  CSS Custom Scrollbar Styles (Webkit and Firefox) Qomplainerz 0 433 07-26-2023, 07:52 PM
Last Post: Qomplainerz
  CSS Box Decoration Break Qomplainerz 0 379 07-26-2023, 07:49 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 360 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 370 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 366 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Grid Auto-fit and Minmax Qomplainerz 0 348 07-26-2023, 07:41 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 376 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  CSS Feature Queries Qomplainerz 0 336 07-26-2023, 07:05 PM
Last Post: Qomplainerz
  CSS Custom properties (Variables) Qomplainerz 0 277 07-26-2023, 07:04 PM
Last Post: Qomplainerz

Forum Jump:


Users browsing this thread: 3 Guest(s)