Advertisement
CSS Scrollbar Styling
Custom scrollbars use the ::-webkit-scrollbar pseudo-element family in Chromium-based browsers, and the standard scrollbar-width + scrollbar-color properties in Firefox.
Key Pseudo-Elements (Chromium)
::-webkit-scrollbar— sets overall width/height::-webkit-scrollbar-track— the background rail::-webkit-scrollbar-thumb— the draggable handle::-webkit-scrollbar-thumb:hover— hover state::-webkit-scrollbar-corner— bottom-right corner where axes meet
Firefox Standard Properties
scrollbar-width: thin | auto | nonescrollbar-color: <thumb> <track>— two colors in order
Does CSS scrollbar styling work in all browsers?
The ::-webkit-scrollbar approach works in Chrome, Edge, and Safari. Firefox uses the standard scrollbar-width and scrollbar-color properties. Mobile browsers typically ignore scrollbar styles entirely.
How do I hide the scrollbar but keep scrolling?
Use scrollbar-width: none (Firefox) and ::-webkit-scrollbar { display: none; } (Chromium). The element remains scrollable — only the visual scrollbar is hidden.
Can I style only one element's scrollbar?
Yes — scope your selector to the element, e.g. .my-div::-webkit-scrollbar. This overrides the global scrollbar style for just that container without affecting the rest of the page.