Web Designers Must See! How to Customize the Horizontal Scrollbar with CSS -webkit-scrollbar

Scrollbars are an essential element for users to navigate content on websites and applications. While default scrollbars are functional, they are not always ideal from a design perspective. Here, we will introduce how to design horizontal scrollbars using the CSS -webkit-scrollbar property and customize the appearance of your website.

What is -webkit-scrollbar?

-webkit-scrollbar is a CSS property that allows you to customize the appearance of scrollbars in browsers that use the WebKit engine (such as Chrome and Safari). By using this property, you can freely change the width, color, background color, and more of the scrollbar.

When to Use -webkit-scrollbar

This property is especially useful when you want to maintain design consistency across a website or application, or when you want to reflect brand colors in the scrollbar. It is also valuable for web designers and developers who want to create a more refined user interface.

Supported Browsers

The -webkit-scrollbar property works only in browsers that use the WebKit engine. This includes Google Chrome and Safari, but note that it is not supported in Firefox or Internet Explorer. If you want to perform similar customization in Firefox, use the scrollbar-width and scrollbar-color properties.

Important Notes

Using -webkit-scrollbar may affect browser compatibility, so it should be used with caution. To provide a consistent experience for all users, it is important to prepare fallback styles for browsers that do not support this property.

Practical Example: Designing a Horizontal Scrollbar with CSS -webkit-scrollbar

CSS Code

The following CSS code shows a basic example of designing a horizontal scrollbar. Through the styles applied to the .scrollArea class, you can customize the scrollbar width, track background color, and thumb (the draggable part of the scrollbar) background color.

<style>
body {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
h1{
    text-align: center;
    font-size: 20px;
    padding: 10px 0 20px 0;
    line-height: 1.8em;
}

/* Scrollbar style */
.scrollArea::-webkit-scrollbar{
  width: 16px;
  height: 16px;
}
.scrollArea::-webkit-scrollbar-track{
  background-color: #ccc;
}
.scrollArea::-webkit-scrollbar-thumb{
  background-color: #7F00FF;
}

/* Apply only to Firefox */
@-moz-document url-prefix() {
  .scrollArea{
    scrollbar-width: thin;
    scrollbar-color: #7F00FF #ccc;
  }
}

.scrollArea{
  width: 800px;
  margin: 0 auto;
  position: relative;
  overflow-y: hidden;
  overflow-x: scroll;
}
ul {
  width: 2320px;
  padding: 0 0 20px 0;
  margin: 0;
  height: 300px;
  display: flex;
  position: relative;
}
ul li{
  width: 300px;
  height: 300px;
  margin: 0 20px 0 0;
  float: left;
  background-color: #000;
  list-style: none;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 300px;
}
ul li:last-child{
  margin: 0;
}
</style>

HTML Code

The HTML structure is simple. Inside a div element with the scrollArea class, a ul containing multiple horizontally aligned li elements is placed. This creates an area that requires horizontal scrolling.

<h1>Designing a horizontal scrollbar using CSS [-webkit-scrollbar].</h1>

<div class="scrollArea">
  <ul>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
    <li>Box Area</li>
  </ul>
</div>

Demo Page: Horizontal Scrollbar Designed with CSS [-webkit-scrollbar]

You can access a demo page featuring the designed horizontal scrollbar via the link below. Through this demo, you can see how -webkit-scrollbar can be used on an actual web page.

Demo page of a horizontal scrollbar designed with CSS [-webkit-scrollbar]

Summary

By using -webkit-scrollbar, you can effectively customize scrollbars on web pages and applications, improving the overall user experience.
However, it is important to consider browser compatibility to ensure that all users have a consistent experience.

　
*If you choose to reuse this code, please do so at your own responsibility.
Do not reuse the Google Analytics tag included in the head tag of the demo page.*