CSS显示水平滚动条？

Question

我看到了这个stackoverflow帖子 CSS div element - how to show horizontal scroll bars only? 但是，当我尝试答案时，滚动条不会显示。我可以水平滚动，但我也希望显示水平滚动条。我在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/

Answer 2

滚动条未显示的原因是，您在div中添加的内容完全在定义的宽度范围内。内容溢出后，滚动条会出现。