CSS - scrollbar-gutter 属性_CSS 菜鸟教程

CSS scrollbar-gutter 属性允许开发人员为滚动条创建固定空间。

可能的值

auto − 默认值。如果需要滚动条，浏览器将自动创建一个装订线。
stable - 浏览器将始终为滚动条保留空间，即使不需要它。
both-edges - 浏览器在元素的内联开始边缘和结束边缘都为滚动条保留空间。

适用于

滚动框。

DOM 语法

object.style.scrollbarGutter: "auto|stable|both-edges";

CSS scrollbar-gutter - 自动值

以下示例演示了如何使用 scrollbar-gutter： auto 属性创建一个带有 scrollbar 的元素，该 scrollbar 仅在元素的内容溢出其容器时才会出现 -

<html>
<head>
<style>	
	 	.scroll-gutter-auto {
	 	 	 margin: 10px;
	 	 	 width: 300px;
	 	 	 height: 190px;
	 	 	 overflow: auto;
	 	 	 scrollbar-gutter: auto;	
	 	 	 background-color: #F1EFB0;
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</style>
</head>
<body>
	 	<div class="scroll-gutter-auto">
	 	 	 <h3>overflow: auto and scrollbar-gutter: auto</h3>
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	 	</div>
</body>
</html>

CSS Scrollbar Gutter - 稳定值

以下示例演示了如何使用 scrollbar-gutter： stable 使滚动条始终可见，即使内容适合容器 -

<html>
<head>
<style>	
	 	.scroll-gutter-scroll {
	 	 	 margin: 10px;
	 	 	 width: 350px;
	 	 	 height: 210px;
	 	 	 overflow: scroll;
	 	 	 scrollbar-gutter: stable;
	 	 	 background-color: #F1EFB0;
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</style>
</head>
<body>
	 	<div class="scroll-gutter-scroll">
	 	 	 <h3>overflow: scroll and scrollbar-gutter: stable</h3>
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. Lorem Ipsum is simply dummy text.
	 	</div>
</body>
</html>

以下示例演示了如何使用 scrollbar-gutter： stable 来隐藏超出容器边缘的任何内容，同时仍为滚动条留出空间 -

<html>
<head>
<style>
	 	.scroll-gutter-hidden {
	 	 	 margin: 10px;
	 	 	 width: 350px;
	 	 	 height: 150px;
	 	 	 overflow: hidden;
	 	 	 scrollbar-gutter: stable;
	 	 	 background-color: #F1EFB0;
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</style>
</head>
<body>
	 	<div class="scroll-gutter-hidden">
	 	 	 <h3>overflow: hidden and scrollbar-gutter: stable</h3>
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text ever since the 1500s.
	 	</div>
</body>
</html>

CSS scrollbar-gutter - 双边值

以下示例演示如何使用 CSS 属性 scrollbar-gutter： stable both-edges 使滚动条始终在两个边缘可见，即使元素的内容适合其容器 -

<html>
<head>
<style>
	 	.scroll-gutter-both-edges {
	 	 	 margin: 10px;
	 	 	 width: 370px;
	 	 	 height: 220px;
	 	 	 overflow: scroll;
	 	 	 scrollbar-gutter: stable both-edges;
	 	 	 background-color: #F1EFB0;
	 	}
	 	h3 {
	 	 	 color: #DC4299;
	 	}
</style>
</head>
<body>
	 	<div class="scroll-gutter-both-edges">
	 	 	 <h3>overflow: hidden and scrollbar-gutter: stable both-edges</h3>
	 	 	 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
	 	</div>
</body>
</html>

<< CSS - scrollbar-width 属性 CSS - shape-image-threshold 属性 >>