CSS scrollbar-gutter基本效果实例页面
回到相关文章 »效果：
auto
感谢异步社区，没想到《CSS新世界》可以获得2021年畅销新书奖，毕竟8月中旬才上架，在这里也感谢大家的认可与支持。
感谢异步社区，没想到《CSS新世界》可以获得2021年畅销新书奖，毕竟8月中旬才上架，在这里也感谢大家的认可与支持。
stable
感谢异步社区，没想到《CSS新世界》可以获得2021年畅销新书奖，毕竟8月中旬才上架，在这里也感谢大家的认可与支持。
感谢异步社区，没想到《CSS新世界》可以获得2021年畅销新书奖，毕竟8月中旬才上架，在这里也感谢大家的认可与支持。
stable both-edges
感谢异步社区，没想到《CSS新世界》可以获得2021年畅销新书奖，毕竟8月中旬才上架，在这里也感谢大家的认可与支持。
感谢异步社区，没想到《CSS新世界》可以获得2021年畅销新书奖，毕竟8月中旬才上架，在这里也感谢大家的认可与支持。
代码：
CSS代码：
.x {
max-width: 320px;
height: 150px;
border: 1px solid;
margin: 8px 0;
overflow: auto;
}
.auto {
scrollbar-gutter: auto;
}
.stable {
scrollbar-gutter: stable;
}
.both-edges {
scrollbar-gutter: stable both-edges;
}
HTML代码：
<h4>auto</h4>
<div class="x auto">
<p>...没想到《CSS新世界》...</p>
</div>
<div class="x auto">
<p>...没想到《CSS新世界》...</p>
<img src="0.jpg">
</div>
<h4>stable</h4>
<div class="x stable">
<p>...没想到《CSS新世界》...</p>
</div>
<div class="x stable">
<p>...没想到《CSS新世界》...</p>
<img src="0.jpg">
</div>
<h4>stable both-edges</h4>
<div class="x both-edges">
<p>...没想到《CSS新世界》...</p>
</div>
<div class="x both-edges">
<p>...没想到《CSS新世界》...</p>
<img src="0.jpg">
</div>