Custom Scrollbar CSS

Customizing a scrollbar in CSS involves modifying the visual aspects of scrollbars on a webpage. By default, browsers have their unique scrollbar designs that may differ between browsers and OS. Nonetheless, CSS empowers you to supersede these defaults and craft a scrollbar that aligns with your site or app's aesthetics.

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:

::-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.

::-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.

::-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 basic demonstration of creating a custom scrollbar using CSS:

Example


<!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

Keep in mind that customizing scrollbars may not be supported by all web browsers, and certain properties may not work consistently across different browsers. Moreover, altering scrollbars should be a sporadic practice due to potential impacts on user experience and accessibility. It is essential to guarantee that all users can effectively interact with and navigate your customized 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.

Utilizing custom scrollbars can offer design flexibility and aesthetic benefits, however, it's essential to keep in mind that they should be applied judiciously. Overly intricate designs or excessive customization can potentially detract from the user experience, especially for individuals with impairments, leading to usability issues. Thus, when implementing custom scrollbars using CSS, it is pivotal to strike a balance between visual appeal and practicality. Additionally, conducting thorough testing of the customized scrollbars across different browsers and devices is advisable to guarantee proper functionality and maintain accessibility.

How to Make Custom Scrollbar in CSS

Why do We Use a Custom Scrollbar in CSS

Input Required