{"id":283930,"date":"2019-03-07T08:19:34","date_gmt":"2019-03-07T15:19:34","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=283930"},"modified":"2020-04-20T16:11:43","modified_gmt":"2020-04-20T23:11:43","slug":"scrollbar-width","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-width\/","title":{"rendered":"scrollbar-width"},"content":{"rendered":"\n

Thescrollbar-width<\/code> property in CSS controls the width or \u201cthickness\u201d of a scrollbar. scrollbar-width<\/code> is part of the CSS Working Group\u2019s Scrollbars Module Level 1 draft<\/a>, which is still a work in progress. The consensus at the time of writing this article is that scrollbar-width<\/code> is likely to be included in future versions of CSS, but there is debate whether a variable <length><\/code> argument will be allowed, or if the options will be limited to preset values (more on those later).<\/p>\n\n\n\n

Adjusting the width of the scrollbar is particularly important on pages or user interfaces with limited space, where trimming just a few pixels off the scrollbar (or removing it altogether) can give the content enough room to breath, without removing the ability to scroll.<\/p>\n\n\n\n

For one example, imagine a text editing interface where the <textarea><\/code> needs to fit within a short, narrow container. In such a situation, the scrollbar can take up much of the available space:<\/p>\n\n\n\n

\"\"
<textarea><\/code> with scrollbar-width: auto;<\/code><\/figcaption><\/figure>\n\n\n\n

With scrollbar-width<\/code>, we can set the width to thin<\/code> to save some space:<\/p>\n\n\n\n

.scrollable-element {\n  scrollbar-width: thin;\n}<\/code><\/pre>\n\n\n\n
\"textarea
textarea<\/code> with scrollbar-width: thin;<\/code><\/figcaption><\/figure>\n\n\n\n
Or, we can set the width to none<\/code> to remove it entirely, saving even more space (assuming we\u2019re OK with the scrollbar disappearing):<\/p>\n\n\n\n
.scrollable-element {\n  scrollbar-width: none;\n}<\/code><\/pre>\n\n\n\n
\"\"
textarea<\/code> with scrollbar-width: none;<\/code> \u2013 and you can still scroll!<\/figcaption><\/figure>\n\n\n
Syntax<\/h3>\n\n\n
scrollbar-width: auto | thin | none | <length>;\n<\/code><\/pre>\n\n\n
Values<\/h3>\n\n\n
scrollbar-width<\/code> accepts the following values:<\/p>\n\n\n\n
  • auto<\/code> is the default value and will render the standard scrollbars for the user agent.<\/li>
  • thin<\/code> will tell the user agent to use thinner scrollbars, when applicable.<\/li>
  • none<\/code> will hide the scrollbar completely, without affecting the element\u2019s scrollability.<\/li>
  • <length><\/code> is being debated, but (if added) would be a maximum width of the scrollbar.<\/li><\/ul>\n\n\n
    Example<\/h3>\n\n\n