CSS显示水平滚动条？

Question

我看到这个stackoverflow发布 CSS div元素 - 如何只显示水平滚动条？ 但是,当我尝试答案时,滚动条不会显示.我可以水平滚动,但我也希望显示水平滚动条.我在chrome和Mac上尝试这个.这是我的代码:

<div style="width:500px; overflow-x:scroll; border:dotted 1px; white-space: nowrap;padding-bottom:10px;">
<img src="img1.jpeg">
<img src="img2.jpeg">
<img src="img3.jpeg">
<img src="img4.jpeg">
<img src="img5.jpeg">
</div>

JsFiddle:https://jsfiddle.net/t30xshro/

Answer 1

如评论中所述,OSX默认隐藏滚动条.

有一些CSS选项明确适用于osX/Chrome以处理ScrollBar行为/外观:

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

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

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

JsFiddle:https://jsfiddle.net/2y2ua128/2/