{"id":278429,"date":"2018-11-09T08:05:41","date_gmt":"2018-11-09T15:05:41","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=278429"},"modified":"2021-09-11T13:18:19","modified_gmt":"2021-09-11T20:18:19","slug":"scrollbar-gutter","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scrollbar-gutter\/","title":{"rendered":"scrollbar-gutter"},"content":{"rendered":"\n

The scrollbar-gutter<\/code> property in CSS provides flexibility to determine how the space the browser uses to display a scrollbar that interacts with the content on the screen. The spec describes it as “reserving space for the scrollbar”. The beauty of this is that now we can make sure:<\/p>\n\n\n\n

  1. Content doesn’t reflow depending on if there is a scrollbar or not<\/li>
  2. There is a consistent experience for users whether they have “overlay” scrollbars or not.<\/li><\/ol>\n\n\n\n
    body {\n  scrollbar-gutter: stable both-edges;\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
    So we’re all on the same page, a scrollbar is that thing typically on the side of the browser (formally referred to as the “user-agent” \u2014 or UA \u2014 in the spec) that indicates your scroll position relative to the total available space on the webpage.<\/p>\n\n\n\n
    Those have traditionally been a visual container with a sliding indicator. These are referred to as classic scrollbars<\/strong>. The indicator sits inside of the gutter and the gutter takes up physical real estate on the screen when it’s displayed.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Lately, though, scrollbar appearances have trended toward something much more minimal. We call those overlay scrollbars<\/strong> and they are either partially or fully transparent while sitting on top of the page content. In other words, unlike classic scrollbars that take up physical real estate on the screen, overlay scrollbars sit on top of the screen content.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    While we’re at it, a scrollbars can pop up in other places. Besides sitting flush to the right of the browser, we will see scrollbars on HTML elements where content overflows the element and the overflow<\/code> property (or overflow-x<\/code> and overflow-y<\/code>) are set to the scroll<\/code> value. And note that the existence of overflow-x<\/code> means we have horizontal scrolling in addition to vertical scrolling.<\/p>\n\n\n\n
    That’s what we’re talking about. Not the indicator itself, but the container that holds it. That’s the gutter. Whether a browser uses a classic or overlay scrollbar is totally up to the UA itself. That’s not for us to decide. Such is true of the scrollbar width. The user agent defines that and gives us no control over it.<\/p>\n\n\n\n
    That’s where scrollbar-gutter<\/code> comes in. We can spell out whether the gutter is present in it’s classic and overlay variations.<\/p>\n\n\n
    Syntax<\/h3>\n\n\n
    .my-element {\n  scrollbar-gutter: auto | stable && both-edges?\n}<\/code><\/pre>\n\n\n\n
    A double ampersand (&&)<\/strong> separates two or more components, all of which must occur, in any order.

    A question mark (?)<\/strong> indicates that the preceding type, word, or group is optional (occurs zero or one times).<\/p>\n\n\n
    Values<\/h3>\n\n\n