Show Horizontal Scroll Only In Div Using CSS




Here we consider how to show horizontal scroll only using CSS. Lets start with one example here. Suppose we have a Div as shown below.

Show Horizontal Scroll Only In Div Using CSS, How To Show Horizontal Scroll Only In Div Using CSS, Show Horizontal Scroll Only In Div, Style For Show Horizontal Scroll Only, Show Horizontal Scroll, Hide Vertical Scroll, Vertical Scroll Hidden, Showing Horizontal Scroll Only, Horizontal Scroll, Scroll In Horizontal Direction, HTML, CSS

Here we have given a particular height and width for this Div. We have enabled Scrolling also. The style applied for this Div is as shown below.

.clsScroll{
         width: 400px;
         height: 200px;
         overflow:auto;
         background : yellow;
}



On runtime, The result will be like this.

Show Horizontal Scroll Only In Div Using CSS, How To Show Horizontal Scroll Only In Div Using CSS, Show Horizontal Scroll Only In Div, Style For Show Horizontal Scroll Only, Show Horizontal Scroll, Hide Vertical Scroll, Vertical Scroll Hidden, Showing Horizontal Scroll Only, Horizontal Scroll, Scroll In Horizontal Direction, HTML, CSS

Now for showing only horizontal Scrolling, apply following style.

.clsScroll{
         width: 400px;
         height: 200px;
         background: yellow;
         overflow-y: hidden;
         overflow-x: auto;
}



Here we have made vertical Scroll hidden.

overflow-y : hidden.

And enabled horizontal Scroll.

overflow-x : auto.

By applying above style, we can make a div only horizonatlly scrollable. On runtime, The result will be like this.

Show Horizontal Scroll Only In Div Using CSS, How To Show Horizontal Scroll Only In Div Using CSS, Show Horizontal Scroll Only In Div, Style For Show Horizontal Scroll Only, Show Horizontal Scroll, Hide Vertical Scroll, Vertical Scroll Hidden, Showing Horizontal Scroll Only, Horizontal Scroll, Scroll In Horizontal Direction, HTML, CSS