CSS - scrollbar-width 屬性

CSS scrollbar-width 屬性用於設定捲軸滑塊和軌道寬度。

可能的值

auto − 預設值。瀏覽器將使用預設的捲軸寬度。
none − 此屬性完全隱藏捲軸，即使內容仍然可滾動。
thin − 瀏覽器將顯示比預設捲軸更細的捲軸。

應用於

滾動框。

DOM 語法

object.style.scrollbarWidth= "auto|none|thin";

scrollbar-width 屬性僅受 Firefox 瀏覽器支援。

CSS 捲軸寬度 - auto 值

以下示例演示瞭如何使用 scrollbar-width: auto 屬性，該屬性允許瀏覽器自動設定捲軸的寬度：

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-width: auto;
      border: 2px solid red;
   }
</style>
</head>
<body>
   <h3>This example is only supported by Firefox Browser.</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-width: auto</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
      </div>
   </div>
</body>
</html>

CSS 捲軸寬度 - none 值

以下示例演示瞭如何使用 scrollbar-width: none 屬性隱藏捲軸：

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-width: none;
      border: 2px solid red;
   }
</style>
</head>
<body>
   <h3>This example is only supported by Firefox Browser.</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-width: none</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
      </div>
   </div>
</body>
</html>

CSS 捲軸寬度 - thin 值

以下示例演示瞭如何使用 scrollbar-width: thin 屬性使捲軸更細：

<html>
<head>
<style>
   .scroll-container {
      width: 300px;
      height: 150px;
      overflow: auto;
      scrollbar-width: thin;
      border: 2px solid red;
   }
</style>
</head>
<body>
   <h3>This example is only supported by Firefox Browser.</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-width: thin</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
      </div>
   </div>
</body>
</html>

列印頁面