CSS 属性

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

属性值

  • auto: 默认值。如果需要滚动条，浏览器将自动创建装订线。

  • stable: 浏览器将始终为滚动条保留空间，即使不需要。

  • both-edges: 浏览器在元素的内联开始边缘和结束边缘上保留滚动条的空间。

适用

滚动框。

DOM 语法

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

CSS scrollbar-gutter: auto

以下示例演示如何使用滚动条- 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>
       CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。

   </div>
</body>
</html>

CSS scrollbar-gutter: 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>
       CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
   </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>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
   </div>
</body>
</html>

CSS scrollbar-gutter: stable 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>
      CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
   </div>
</body>
</html>