6

I saw this stackoverflow post CSS div element - how to show horizontal scroll bars only? However when I try the answers the scroll bar is not shown. I can scroll horizontally, but I also want the horizontal scroll bar to be shown. I am trying this on chrome and Mac. Here is my code: 

<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/

Community
  • 1
  • 1
apadana
  • 13,456
  • 15
  • 82
  • 98
  • 1
    Can you make a jsfiddle of your setup ? – Remy Grandin Jul 01 '15 at 06:57
  • I only could manage the horizontal scrollbar with 2 divs, one with the desired width with scroll-x: auto, and a nested one with the width of all its items, including margins – Zander Jul 01 '15 at 06:58
  • 1
    I think that the reason why is because on mac chrome by default doens't show the scrollbars untill you actually scroll..can you try on another browser and see if it works? cause it should..well, at least your code works on chrome for windows..exactly like you pasted above as i have just tried and i can see the horizontal scrollbar – Nick Jul 01 '15 at 06:59

2 Answers2

20

As stated in the comments, OSX hides scrollbars by default.

There are a few CSS options which explicitly work for osX/Chrome in order to handle ScrollBar behaviour/appearance:

.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/peanut/zvskLcef/

Peanut
  • 3,753
  • 3
  • 31
  • 45
  • 1
    Awesome! Worked like a charm. – apadana Jul 01 '15 at 07:11
  • 2
    Worked for me in 2019... yayyyyyyyyyyyyy Thanks @Peanut ! – Haroon Jan 10 '19 at 23:57
  • 1
    @Peanut this works great on Chrome and Safari. You might want to update the images in your jsfiddle with `` since the original links are broken. Also, it's worth mentioning that this solution currently does not work on FF/OSX, see [here](https://stackoverflow.com/questions/18317634/force-visible-scrollbar-in-firefox-on-mac-os-x) – Stefano Dec 20 '19 at 01:25
-1

The reason why scroll bar is not showing because, the content you have added inside the div is well within the defined width. Once the content overflows scroll bar appears.

Target
  • 199
  • 4
  • 19