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>

打印页面