Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar. The following example creates a thin (10px wide) scrollbar, which has a grey track/bar color and a dark-grey (#888) handle:

Mar 6, 2025 · The CSS scrollbars styling module defines properties that you can use for visual styling of scrollbars. You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar track, which is the background of the scrollbar, and the color of the scrollbar thumb, which is the draggable handle of the scrollbar.

Sep 10, 2024 · JavaScript can be used to create the custom scrollbars by manipulating the elements and their scrolling behaviour. This approach can involves hiding the default scrollbar …

Feb 23, 2017 · You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical). If you only want a scrollbar when needed, just do overflow-y:auto;

How do I change it so that the div is only scrollable vertically? There's overflow-x and overflow-y in CSS3, which do what you want. You have it covered aside from using the wrong property. The scrollbar can be triggered with any property overflow, overflow-x, or overflow-y and each can be set to any of visible, hidden, scroll, auto, or inherit.

Apr 27, 2021 · Have you ever visited a website with a custom scrollbar and wondered how they did it? After reading this article you will understand just about everything there is to know about customizing and styling scrollbars using CSS.

Oct 10, 2024 · To create a custom scrollbar using HTML and CSS, you can follow these general steps: Create a container element that will hold the content and the scrollbar. This can be a div or any other HTML element. Set the height of the container element to a fixed value, and add overflow-y: scroll to enable the scrollbar.

Sep 8, 2019 · So in this article, we will discuss different examples of CSS custom scrollbar along with horizontal scroll bar each of different style and color with the help of HTML, CSS and JavaScript. The scrollbar is well known in light of their adaptable property. These scrollbars are lightweight so the size and burden time is quick.

Nov 14, 2022 · We can give the scroll bar a fixed width, background color, rounded corners… lots of things! If we’re customizing the main scrollbar of a page, then we can use ::-webkit-scrollbar directly on the HTML element:

Aug 1, 2020 · Custom scrollbars on the web can make a site or design stand out. They can help in portraying key design aspects of a site, whether that be a specific color or a particular style.