Vertical / Horizontal Scrollbars Only

Published in Website Design on Tuesday, 24 February 2009  |   Subscribe to rss feed for Vertical / Horizontal Scrollbars Only (rss logo graphic) Post RSS

Overflow-x and Overflow-y

While they don't (yet) validate, these can be used to control scrollbar display on all major browsers.

View The Sample

This is an example of one directional scrolling that uses the overflow-x and overflow-y properties.This is an example of one directional scrolling that uses the overflow-x and overflow-y properties.This is an example of one directional scrolling that uses the overflow-x and overflow-y properties.This is an example of one directional scrolling that uses the overflow-x and overflow-y properties.

Get The Code

<div style="border: #002200 1px solid; padding:5px; overflow-y: scroll; overflow-x: hidden; width: 200px; height: 60px">

This is an example of one directional scrolling that uses the overflow-x and overflow-y properties.This is an example of one directional scrolling that uses the overflow-x and overflow-y properties.This is an example of one directional scrolling that uses the overflow-x and overflow-y properties.This is an example of one directional scrolling that uses the overflow-x and overflow-y properties.

</div>

Non Validation

Unfortunately the current CSS spec does not support these overflow-x and overflow-y properties - but W3C plan to include them in their next revision. In the meantime, they are still supported by all major browsers.

Valid Overflow Properties

Currently the only valid way to use overflow is a general declaration: 'Overflow: value;'

You can assign four values to overflow and they should give the following results:

  • visible. the content flows out of the box.
  • hidden. the overflowing content is completely hidden, not accessible to the user.
  • auto. show scrollbars where necessary (horizontal or vertical or both).
  • scroll. always show horizontal and vertical scrollbars, regardless of whether they're necessary. This value is never used; you generally want auto.

All resources written by The WebFertile Team.

Whatever your business needs, one of our highly trained small business development experts is sure to be able to help.

 





Tags

css, website design, scrollbars, overflow