CSS scrollbar-width 属性用于设置滚动条、拇指和轨道的宽度样式。
可能的值
- auto − 默认值。浏览器将使用默认的滚动条宽度。
- none − 当内容仍可滚动时，此属性完全隐藏滚动条。
- thin - 浏览器将显示一个比默认滚动条更细的滚动条。
适用于
滚动框。
DOM 语法
object.style.scrollbarWidth= "auto|none|thin";
scrollbar-width 属性仅受 Firefox 浏览器支持。
CSS scrollbar-width - auto值
以下示例演示了如何使用 scrollbar-width： auto 属性，该属性允许浏览器自动设置 scrollbar 的宽度 -
<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 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>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 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>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>
