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>
