--- title: "How to create a scroll bar using CSS" description: "The appearance of scrollbars can be highly dependent on the browser and operating system settings." author: "Ashutosh Patel" published: 2024-06-10 updated: 2024-06-10 canonical: https://www.mindstick.com/articles/336054/how-to-create-a-scroll-bar-using-css category: "css-css3" tags: ["css-css3", "css", "css styling"] reading_time: 3 minutes --- # How to create a scroll bar using CSS ### Creating Scroll bar Using CSS When you create a custom scrollbar with CSS it uses the `::-webkit-scrollbar` pseudo-element, which allows you to style scrollbar [elements](https://yourviews.mindstick.com/story/1372/the-5-elements-of-nature) like track, thumb, buttons, etc. However, it is necessary to force it to note that this feature is based on WebKit-specific browsers (Chrome and Safari used. etc.) that are supported and may not work on all browsers or [versions](https://answers.mindstick.com/qa/49863/list-the-versions-of-mac-os-x) ## Basic Syntax ```css /* Define scrollbar styles for WebKit-based browsers*/ ::-webkit-scrollbar { width: 10px; /* width of the scrollbar */ } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; /* color of the track */ } /* Handle */ ::-webkit-scrollbar-thumb { background: #888; /* color of the scrollbar handle */ } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; /* change color of the scrollbar handle on hover */ } ``` You can customize these styles to suit your **[website](https://yourviews.mindstick.com/view/84026/why-is-my-website-losing-organic-traffic)** design. Keep in mind that this CSS only works in **WebKit-based** browsers. For other browsers, you may need to use vendor prefixes or other [techniques](https://yourviews.mindstick.com/view/82424/best-digital-marketing-techniques-for-tourism-industry) to get the same effect. ## Example- ```html Custom Scrollbar Example

CSS Custom Scroll bar Example

Lorem ipsum dolor sit amet, consectur adipiscing elit. That is right. Pallantesque habitus, tristic senctus, natus and maleusuda fames and turpis agestas. Integer status aristocratic and turpis pretium, sit amet hendrerit quam mattis.

Lorem ipsum dolor sit amet, consectur adipiscing elit. That is right. Pallantesque habitus, tristic senctus, natus and maleusuda fames and turpis agestas. Integer status aristocratic and turpis pretium, sit amet hendrerit quam mattis.

``` - **In the above example-**\ We use `::-webkit-scrollbar` to [describe](https://answers.mindstick.com/qa/72290/which-are-the-two-kinds-of-animals-that-scientist-describe-as-warm-blooded-define-what-are-they) the methods for creating the scrollbar, [targeting](https://yourviews.mindstick.com/view/81082/coronavirus-pandemic-is-targeting-pregnant-women-in-usa) WebKit-based browsers like Chrome and Safari. - We specify the width and [background color](https://www.mindstick.com/forum/18/split-background-color) of the scrollbar track (`::-webkit-scrollbar-track`) and the background color of the scrollbar handle (`::-webkit-scrollbar-thumb`). - We also add a hover effect for the scrollbar handle (`::-webkit-scrollbar-thumb:hover`). - Finally we have a content [container](https://www.mindstick.com/interview/2198/what-method-is-used-to-specify-a-container-s-layout-in-java) (`
`) with a fixed height and an `overflow-y: scroll` [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) to fill the scrollbar. ## Example- ![How to create a scroll bar using CSS](https://www.mindstick.com/mindstickarticle/f9db2cd9-8a56-430e-9856-37538ea6a46c/images/1e5833ae-d714-4374-a90e-5dae0c4945d0.png) **Also, Read:** [How to use @media in CSS](https://www.mindstick.com/articles/336052/how-to-use-media-in-css) --- Original Source: https://www.mindstick.com/articles/336054/how-to-create-a-scroll-bar-using-css Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.