CSS 属性

CSS scrollbar-width 滚动条宽度属性用于设置滚动条滑块和轨道的宽度。

属性值

  • auto: 默认值。浏览器将使用默认的滚动条宽度。

  • none: 当内容仍然可滚动时，此属性完全隐藏滚动条。

  • thin: 浏览器将显示比默认滚动条更细的滚动条。

适用范围

滚动框。

DOM 语法

object.style.scrollbarWidth= "auto|none|thin";
滚动条宽度属性仅受 Firefox 浏览器支持。

CSS scrollbar-width: 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>此示例仅受 Firefox 浏览器支持。</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-width: auto</h1>
         <p>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
         <p>无论何事，只要对它有无限的热情你就能取得成功。</p>
      </div>
   </div>
</body>
</html>

CSS scrollbar-width: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>此示例仅受 Firefox 浏览器支持。</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-width: none</h2>
         <p>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
         <p>无论何事，只要对它有无限的热情你就能取得成功。</p>
      </div>
   </div>
</body>
</html>

CSS scrollbar-width: 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>此示例仅受 Firefox 浏览器支持。</h3>
   <div class="scroll-container">
      <div class="scrolling-section">
         <h2>scrollbar-width: thin</h1>
         <p>A man can succeed at almost anything for which he has unlimited enthusiasm.</p>
         <p>无论何事，只要对它有无限的热情你就能取得成功。</p>
      </div>
   </div>
</body>
</html>