Custom Scrollbar CSS

A custom scrollbar in CSS refers to the ability to style and customize the appearance of scrollbars on a web page. By default, web browsers provide their own scrollbar styles, which can vary in appearance across different browsers and operating systems. However, CSS allows you to override these default styles and create a scrollbar that matches the design of your website or application.

CSS custom scrollbars are often made using a mix of pseudo-elements and CSS attributes. The primary CSS attributes and pseudo-elements for customizing scrollbars are listed below:

1. ::-webkit-scrollbar (for WebKit-based browsers like Chrome and Safari):

'width': Defines the scrollbar's width.
`height`: Set the height of the scrollbar.
'Background': Choose the color for the scrollbar background.
'border-radius': Specify the scrollbar track's border-radius.

2. ::-webkit-scrollbar-thumb (for WebKit-based browsers):

'Background': Choose a background color for the scrollbar thumb, which may be moved around.
'border-radius': Define the scrollbar thumb's border-radius.

3. ::-webkit-scrollbar-track (for WebKit-based browsers):

`Background`: Set the scrollbar track's background color.

How to Make Custom Scrollbar in CSS

Here is a simple illustration of how to make a custom scrollbar in CSS:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
</style>
</head>   
<body>

<h2>Custom Scrollbar Example</h2>
<p><strong>Note:</strong> The -webkit-scrollbar is not supported in Firefox or in Edge, prior version 79.</p>
<p>jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtpjtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtpjtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtpjtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtpjtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtpjtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtpjtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp jtp  </p>
</body>
</html>

Output

Remember that not all browsers may allow custom scrollbars, and some attributes may not function in all browsers. Additionally, as it might impact the user experience and accessibility, customizing scrollbars should only be done rarely. It's crucial to ensure everyone can still utilize and access your custom scrollbar.

Why do We Use a Custom Scrollbar in CSS

In CSS, there are several uses for custom scrollbars.

Enhancement of aesthetics: With custom scrollbars, web designers and developers may coordinate the scrollbars' visual style with the overall aesthetic of a website or online application. This may result in a user interface that is more unified and visually appealing.
Branding: Custom scrollbars may be made to match the hues, fashion, and identity of a company. This promotes brand uniformity across the whole website or application.
Better User Experience: Users may find identifying and engaging with scrollable material simpler when custom scrollbars are used. Custom scrollbars can improve the user experience by offering clear visual indications and a more user-friendly design.
Accessibility: Although custom scrollbars can be utilized to improve the aesthetic appeal, it's critical to ensure they don't compromise accessibility. Individuals with impairments should still be able to use properly made custom scrollbars and adhere to accessibility guidelines.
Cross-Browser Consistency: Operating systems and web browser default scrollbar styles might differ from one another. It is possible to establish a uniform look and behavior across many platforms by customizing scrollbars with CSS.
Unique Design Requirements: Sometimes, a particular design or layout may need unique scrollbars to blend in with the rest of the user interface. This is especially common in websites and online apps with certain design needs.
Highlighting Important Content: Users may more easily recognize and navigate to key material by using custom scrollbars that can be created to stand out and bring attention to particular portions of a page.

Custom scrollbars can provide design flexibility and aesthetic advantages, but it's crucial to remember that they should only be utilized selectively. Particularly for people with impairments, excessive customization or complicated designs may diminish the user experience or result in usability problems. Therefore, while creating custom scrollbars in CSS, it's crucial to balance aesthetics and usefulness. Testing customized scrollbars on various browsers and devices is also a good idea to ensure they function properly and retain accessibility.

Next TopicStyle CSS

← prev next →