Horizontal Scroller in CSS

How can I style horizontal scrollbar by CSS?

::-webkit-scrollbar {
  height: 4px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

since logically one cannot force a vertical scrollbar to be a certain height (since dictated by the positioned parent) - therefore such height property is to target the horizontal's scrollbar height - and vice-versa (width for the width of the vertical scrollbar.).

CSS horizontal scroll

You can use display:inline-block with white-space:nowrap. Write like this:

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap;
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

Check this http://jsfiddle.net/YbrX3/

CSS show horizontal scroll bars?

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/

horizontal scrollbar

change your code into this:

 <html>
 <body>
    <div style ="width: 20px; height:30px; border:1px solid black; overflow-x:scroll">
        <!-- various of text here that can makes it go out the border-->
    </div>  
 </body>
 </html>

How do I hide horizontal scroll bar and keep vertical scroll bar visible while still being able to scroll horizontally?

Try this:

.section {
  overflow-x: scroll;
  scrollbar-width: none;
  overflow-y: auto;
}

.section::-webkit-scrollbar {
  display: none;
}

Hide vertical scrollbar, keep horizontal and still able to scroll

You can use -webkit-scrollbar, but you need to use width and height instead of display: none

div {  width: 100px;  height: 100px;  font-size: 48px;    overflow: auto;}
::-webkit-scrollbar {  height: 0px;  width: 8px;  border: 1px solid #fff;}
::-webkit-scrollbar-track {  border-radius: 0;  background: #eeeeee;}
::-webkit-scrollbar-thumb {  border-radius: 0;  background: #b0b0b0;}

<div>Lorem ipsum dolor sit amet.</div>
Shift scroll to move horizontally