CSS - Use a Horizontal Scrollbar Only

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.

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 - use a horizontal scrollbar only

.viewgallerylist {
    min-width: 920px;
    overflow: hidden;
    -ms-overflow-x: auto; /* IE8 */
    overflow-x: auto;
}

(min-width doesn't work in IE6, in case you still want to support that dinosaur)

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 Scroll Bar only in Browser?

.container {
      display: grid;
      line-height: 1.7;
      width: 100vw;
    } 

/* Because of this width horizontal scroll bar is appear. You can either delete this property or write like this - */

.container {
      ​display: grid;
      ​line-height: 1.7;
      ​ width: 100%;
   ​} 

/* or Use this- */

body {
  overflow-x: hidden;
   }

Horizontal scrollbar only appearing at bottom of page

Its because your document (body) isnt stretched to the full height of the viewport (html), you need to assign height:100vh, also remove your overflow settings so you dont get 2 scrollbars appearing (one on body one on html).

Simply change your CSS to:

html,body{
  height:100vh;
  width:100vw;
  margin: 0;
  padding: 0;
}

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.

---

Related Topics