Scrollbar Styling in Chrome, Firefox, and Safari — Customizing Browser Elements

Style and personalize your web app’s scrollbar across major browsers. Elevate user experience with custom scrollbars. Enhance scrolling now! Happy styling! #CustomScrollbars #WebDesign

In modern web development, customizing the appearance of browser elements has become a popular trend. One such element is the scrollbar, which provides users with an interactive way to navigate content. This article will focus on styling the scrollbar in three major browsers: Chrome, Firefox, and Safari. We will explore the CSS selectors specific to each browser and provide examples of how to customize the scrollbar’s look and feel.

Photo by Brian Miner on Unsplash

Styling the Scrollbar in Chrome:

Google Chrome, being one of the most widely used browsers, provides CSS selectors to target and style various parts of the scrollbar. Here are some key selectors specific to Chrome:

1. ::-webkit-scrollbar: Targets the scrollbar as a whole.
2. ::-webkit-scrollbar-thumb: Targets the draggable thumb of the scrollbar.
3. ::-webkit-scrollbar-track: Targets the track, which is the area behind the thumb.
4. ::-webkit-scrollbar-button: Targets the buttons at the ends of the scrollbar.
5. ::-webkit-scrollbar-corner: Targets the corner where horizontal and vertical scrollbars meet.

Styling the Scrollbar in Firefox:

Mozilla Firefox also offers CSS selectors for styling the scrollbar. But we get limited sytling options, here are the relevant selectors for Firefox:

1. scrollbar-color: Sets the color of the scrollbar track and thumb, it can take a value among below

- auto: Default platform rendering for the track.
- <color> <color>: Applies the first color to the thumb, the second to the track.

The color for track [second color] appears when we hover over the scrollbar, by default the track color is not visible or its transparent

2. scrollbar-width: Sets the maximum thickness of an element’s scrollbars when shown. We cannot adjust width in pixels or other units, we have to make use of one among below

- auto: Default scrollbar width for the platform.
- thin: A thin variant or a thinner scrollbar than the default.
- none: No scrollbar shown (element still scrollable).

Styling the Scrollbar in Safari:

Safari, Apple’s default browser, provides its own set of CSS selectors to customize the scrollbar. Here are the selectors specific to Safari:

1. ::-webkit-scrollbar: Targets the scrollbar as a whole.
2. ::-webkit-scrollbar-thumb: Targets the draggable thumb.
3. ::-webkit-scrollbar-track: Targets the track behind the thumb.
4. ::-webkit-scrollbar-button: Targets the buttons at the ends of the scrollbar.
5. ::-webkit-scrollbar-corner: Targets the corner where horizontal and vertical scrollbars meet.

Examples: Let’s see some examples of how to use these selectors to style the scrollbar in each browser:

.element-with-scroll {
  overflow-y: scroll;
  max-height: 100px; /* Set a maximum height for the scrollable element */
   }

 

/* Styling the scrollbar in Firefox  */
.element-with-scroll {   
  scrollbar-color: red green;
  scrollbar-width: thin;
}

/* Styling the scrollbar in Chrome and Safari */
.element-with-scroll::-webkit-scrollbar {
  width: 10px;
}

.element-with-scroll::-webkit-scrollbar-thumb {
  background-color: red; /* Set thumb color for Chrome and Safari */
}

.element-with-scroll::-webkit-scrollbar-track {
  background-color: green; /* Set track color for Chrome and Safari */
}

/* Optional: Add some styling for better visibility */
.container {
  max-width: 600px; /* Set a maximum width for the container */
  margin: 0 auto; /* Center the container */
  padding: 20px;
  box-shadow: 0 0 20px grey; 
  border-radius:20px
}

 h3 {
   margin:5px
 }

<div class="container">
  <h3>Custom Scrollbar Styling Demo</h3>

  <div class="element-with-scroll">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac urna ac mi dapibus eleifend. Proin pharetra, ligula vel vestibulum sagittis, velit nisi efficitur libero, ac gravida justo purus nec turpis.</p>
    <p>Integer vehicula diam ut velit egestas, a mattis ligula tincidunt. Sed congue vel elit non dignissim. Nulla facilisi. Vivamus non lacus auctor, tincidunt tortor eu, eleifend erat. Aenean ut laoreet dui.</p>
    <p>Quisque auctor nunc sit amet justo euismod, eu ultricies lacus fermentum. Maecenas eu nisl eget lectus iaculis aliquam. Suspendisse potenti. Fusce sit amet justo vel libero dapibus bibendum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac urna ac mi dapibus eleifend. Proin pharetra, ligula vel vestibulum sagittis, velit nisi efficitur libero, ac gravida justo purus nec turpis.</p>
    <p>Integer vehicula diam ut velit egestas, a mattis ligula tincidunt. Sed congue vel elit non dignissim. Nulla facilisi. Vivamus non lacus auctor, tincidunt tortor eu, eleifend erat. Aenean ut laoreet dui.</p>
    <p>Quisque auctor nunc sit amet justo euismod, eu ultricies lacus fermentum. Maecenas eu nisl eget lectus iaculis aliquam. Suspendisse potenti. Fusce sit amet justo vel libero dapibus bibendum.</p>
     
  </div>

</div>

Summary:

Customizing the scrollbar can enhance the user experience and add a touch of personalization to your web applications. By leveraging the specific CSS selectors provided by Chrome, Firefox, and Safari, you can style different parts of the scrollbar to align with your design requirements. Experiment with various CSS properties and create visually appealing scrollbars that harmonize with your overall website aesthetics.

Remember to test your scrollbar styles in different browsers to ensure consistent and expected results. Enjoy the creative freedom and make scrolling a delightful experience for your users!

Hope the above article gave a better understanding. If you have any questions regarding the areas I have discussed in this article, areas of improvement don’t hesitate to comment below.

[Disclosure: This article is a collaborative creation blending my own ideation with the assistance of ChatGPT for optimal articulation.]