CSS overflow strict and how to display only vertical or horizontal scrollbar

In CSS and HTML developing, sometime, we want to display a text/object on a scrollable limit area. The simple solution is add the CSS property overflow: auto to the bounded div tag. The overflow property also accept some other value such as:

  • visible: The overflow is not clipped. It renders outside the element's box. This is default.
  • hidden: The overflow is clipped, and the rest of the content will be invisible.
  • scroll: The overflow is clipped, but a scroll-bar is added to see the rest of the content.
  • auto: If overflow is clipped, a scroll-bar should be added to see the rest of the content.
  • inherit: Specifies that the value of the overflow property should be inherited from the parent element. This value hardly usefull and in the most case, we should choose another option because it isn't supported in Internet Explorer 7 and the earlier version. In IE 8, we must append !DOCTYPE at begining of html webpage to use it.

This is a simple code that display a scrollable area has class name "scrollable":

  1. .scrollable
  2. {
  3.         overflow: auto;
  4. }
Hide/show line number

Sometime, we don't want to display both vertical and horizontal scrollbar, and there isn't any option for that in the overflow property. However, we can do that by using this CSS 3 solutions:

  1. .scrollable
  2. {
  3.         overflow-x: auto; /*Horizontal scrollbar*/
  4.         -ms-overflow-x: auto; /*IE 8 horizontal scrollbar*/
  5.  
  6.         overflow-y: auto; /*Verical scrollbar*/
  7.         -ms-overflow-y: auto; /*IE 8 vertical scrollbar*/
  8. }
Hide/show line number

 

Note: All browsers seem to further reduce the number of combinations giving different results:

  • In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
  • In IE7, IE8 ‘visible’ becomes ‘hidden’ when combined with ‘hidden’.
  • IE6 seems to render all combinations differently, but of course here ‘visible’ means ‘expand’ the box (in the specified direction) to enclose the content.

There are some example:

 

 
Source code
  1. <div style="width:100px;height:100px;overflow-x:auto;-ms-overflow-x:auto;overflow-y:hidden;-ms-overflow-y:hidden">
  2.         <div style="width:500px;height:500px"></div>
  3. </div>
Hide/show line number
 
Source code
  1. <div style="width:100px;height:100px;overflow-y:auto;-ms-overflow-y:auto;overflow-x:hidden;-ms-overflow-x:hidden">
  2.         <div style="width:500px;height:500px"></div>
  3. </div>
Hide/show line number

But, the solution above is not safe completely, it work only on CSS 3 supporting browser and in the other one it doesn't work and our div tag will be get overflow: visible as default value. So, we should set it to overflow for all and disable only the scrollbar which we don't want to use. The solution will let our code work great on almost all current browser and work well on the older. This is the CSS code that display only horizontal scrollbar by disable the vertical:

  1. .scrollable
  2. {
  3.         overflow: auto;
  4.         overflow-y: hidden;
  5.         -ms-overflow-y: hidden; /*IE 8 only*/
  6. }
Hide/show line number

Note: Neglecting the cases with ‘auto’ (which depend on content), there are 9 (= 3 × 3) possible combinations of values of overflow-x and overflow-y, but only five distinct results in Gecko, Safari, Opera. These correspond to:

  1. visible,visible
  2. hidden,hidden
  3. scroll,scroll; visible,scroll; scroll,visible (3 combinations)
  4. scroll,hidden; visible,hidden (2 combinations)
  5. hidden,scroll; hidden,visible (2 combinations)

In IE7, IE8 there are also the same five distinct results, but they correspond to a different grouping of values:

  1. visible,visible
  2. hidden,hidden; visible,hidden; hidden,visible (3 combinations)
  3. scroll,scroll; visible,scroll; scroll,visible (3 combinations)
  4. scroll,hidden
  5. hidden,scroll