CSS - scrollbar-gutter 属性

CSS scrollbar-gutter 属性允许开发人员为滚动条创建固定空间。

可能的值

auto − 默认值。如果需要滚动条，浏览器将自动创建间隙。
stable − 浏览器将始终为滚动条保留空间，即使不需要也是如此。
both-edges − 浏览器在元素的内联开始和结束边缘都为滚动条保留空间。

应用于

滚动框。

DOM 语法

object.style.scrollbarGutter: "auto|stable|both-edges";

CSS 滚动条间隙 - Auto 值

以下示例演示了如何使用 scrollbar-gutter: auto 属性来创建一个只有在元素内容溢出其容器时才会显示滚动条的元素 -

<html>
<head>
<style> 
   .scroll-gutter-auto {
      margin: 10px;
      width: 300px;
      height: 190px;
      overflow: auto;
      scrollbar-gutter: auto; 
      background-color: #F1EFB0;
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div class="scroll-gutter-auto">
      <h3>overflow: auto and scrollbar-gutter: auto</h3>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS 滚动条间隙 - Stable 值

以下示例演示了如何使用 scrollbar-gutter: stable 使滚动条始终可见，即使内容适合容器 -

<html>
<head>
<style> 
   .scroll-gutter-scroll {
      margin: 10px;
      width: 350px;
      height: 210px;
      overflow: scroll;
      scrollbar-gutter: stable;
      background-color: #F1EFB0;
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div class="scroll-gutter-scroll">
      <h3>overflow: scroll and scrollbar-gutter: stable</h3>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. Lorem Ipsum is simply dummy text.
   </div>
</body>
</html>

以下示例演示了如何使用 scrollbar-gutter: stable 隐藏超出容器边缘的任何内容，同时仍为滚动条保留空间 -

<html>
<head>
<style>
   .scroll-gutter-hidden {
      margin: 10px;
      width: 350px;
      height: 150px;
      overflow: hidden;
      scrollbar-gutter: stable;
      background-color: #F1EFB0;
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div class="scroll-gutter-hidden">
      <h3>overflow: hidden and scrollbar-gutter: stable</h3>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text ever since the 1500s.
   </div>
</body>
</html>

CSS 滚动条间隙 - Both-edges 值

以下示例演示了如何使用 CSS 属性 scrollbar-gutter: stable both-edges 使滚动条始终在两个边缘可见，即使元素内容适合其容器 -

<html>
<head>
<style>
   .scroll-gutter-both-edges {
      margin: 10px;
      width: 370px;
      height: 220px;
      overflow: scroll;
      scrollbar-gutter: stable both-edges;
      background-color: #F1EFB0;
   }
   h3 {
      color: #DC4299;
   }
</style>
</head>
<body>
   <div class="scroll-gutter-both-edges">
      <h3>overflow: hidden and scrollbar-gutter: stable both-edges</h3>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
   </div>
</body>
</html>

打印页面