CSS - scrollbar-width 属性

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>

打印本页