[CSS] CSS scrollbar-gutter 滚动条空间

Browser support: https://caniuse.com/?search=scrollbar-gutter

When a element has limited size, and the content is oversized, the scrolling bar will show up.

Sometimes, scrolling bar will break the original styling... 

To resolve that issue, we can use scrollbar-gutterto reserve the space for scrollbar.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 300px;
        border: 1px black solid;
        overflow: auto;
        scrollbar-gutter: stable;
      }
    </style>
  </head>
  <body>
    <h2>CSS scrollbar-gutter (滚动条空间)</h2>
    <div>
      Tailwind CSS works by scanning all of your HTML files, JavaScript
      components, and any other templates for class names, generating the
      corresponding styles and then writing them to a static CSS file.
    </div>
  </body>
</html>

 

posted @ 2025-05-25 18:48  Zhentiw  阅读(44)  评论(0)    收藏  举报