CSS show horizontal scroll bars?


Tags: html,css

Problem :

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/



Solution :

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


    CSS Howto..

    multiselect.js via gem multi-select-rails - how best to set width

    How to keep a div's height 100%?

    How to align image and text for my html/css

    How do I display epub format book in pure HTML5/CSS/Jquery

    How i can make it wiht css3?

    How to add css in django Updateview or Create view form

    CSS Have a div which can fit 5 li per row how to make 6 go to new line

    css margin-left propery - how to specify for various browsers [closed]

    How to make a menu have submenus in pure CSS

    How i can add css transition to my Jquery dialog?

    How to hide or show correctly page element (with media query of pure css)?

    How to Make Image Do All 3: Cover (left-to-right), Resize, and Scroll

    Bootstrap table table-condensed table-hover, Top Border not showing

    Show icon font on image center on mouse hover

    Codeigniter--add “active” css class to link, how to?

    Using `.toggle()` rather than applying a class to show content

    How to set DIV's width based on CSS indexes

    How to use jQuery to check if element breaks to the next line?

    How to extract attribute values using css selectors?

    How do you avoid class name collisions? [closed]

    How to make a picture responsive that is on wordpress custom post type through HTML/CSS

    How to only use jquery .css() on a specific media query?

    How to stop active effect occurring on all sub menu options from navbar

    how to make the text in a div to not overflow its width

    how to change the height of a div dynamically based on another div using css?

    How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

    How to set the color to the user's link color in CSS?

    How can I apply CSS selector to attribute values being case sensitive?

    How to have a horizontal line at the middle of a html heading with CSS?

    Hide all div element but show first two