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>