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>

列印頁面