CSS 自定义滚动条和强制显示

<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>

 

.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}

.frame::-webkit-scrollbar {
-webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
height: 11px;
}

.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}

 

 

 

上面是经过定制的，所以不会隐藏。

.frame::-webkit-scrollbar { -webkit-appearance: none;}隐藏默认的滚动条。

.frame::-webkit-scrollbar:vertical { width: 11px;}设置垂直滚动条宽度。

当然也有水平滚动条配置，.frame::-webkit-scrollbar:horizontal，那么就要设置他的高度的。如下：

.frame::-webkit-scrollbar:horizontal { height: 11px;}.frame::-webkit-scrollbar-thumb {border-radius: 8px; border: 2px solid red; }滚动条的其他样式定制，注意，这个一定也要定制，否则就是一个透明的滚动条……