CSS div element - how to show horizontal scroll bars only?
You shouldn't get both horizontal and vertical scrollbars unless you make the content large enough to require them.
However you typically do in IE due to a bug. Check in other browsers (Firefox etc.) to find out whether it is in fact only IE that is doing it.
IE6-7 (amongst other browsers) supports the proposed CSS3 extension to set scrollbars independently, which you could use to suppress the vertical scrollbar:
overflow: auto;
overflow-y: hidden;
You may also need to add for IE8:
-ms-overflow-y: hidden;
as Microsoft are threatening to move all pre-CR-standard properties into their own ‘-ms’ box in IE8 Standards Mode. (This would have made sense if they'd always done it that way, but is rather an inconvenience for everyone now.)
On the other hand it's entirely possible IE8 will have fixed the bug anyway.
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/
Div with horizontal scrolling only
The solution is fairly straight forward. To ensure that we don't impact the width of the cells in the table, we'll turn off white-space. To ensure we get a horizontal scroll bar, we'll turn on overflow-x. And that's pretty much it:
.container {
width: 30em;
overflow-x: auto;
white-space: nowrap;
}
You can see the end-result here, or in the animation below. If the table determines the height of your container, you should not need to explicitly set overflow-y
to hidden
. But understand that is also an option.
How do I make the scrollbar on a div only visible when necessary?
Use overflow: auto
. Scrollbars will only appear when needed.
(Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto
and overflow-y: auto
).
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.).
HTML: How to create a DIV with only vertical scroll-bars for long paragraphs?
Use overflow-y
. This property is CSS 3.
Related Topics
How Is "Grid-Template-Rows: Auto Auto 1Fr Auto" Interpreted
Change Bootstrap Carousel Fade Transition
Is There a CSS Selector for Element Without Any Class
Chrome:How to Turn Off User Agent Stylesheet Settings
CSS Transition Between Left -> Right and Top -> Bottom Positions
Row Wrap in Flex-Box Not Wrapping in Safari
CSS List Item Width/Height Does Not Work
Ie - Hidden Radio Button Not Checked When the Corresponding Label Is Clicked
Custom CSS Being Overridden by Bootstrap CSS
How to Match 3D Perspective of Real Photo and Object in CSS3 3D Transforms
Stopping a CSS Animation But Letting Its Current Iteration Finish
Is There a Google Chrome-Only CSS Hack
Rounded Side, Not Rounded Corners
How to Fix Internet Explorer 7 Bug When Using Percentage Widths for Layout
How to Keep :Active CSS Style After Clicking an Element
How to Style the Number on a HTML List
Are There Any Cons to Using Color Names in Place of Color Codes in CSS