Latest web development tutorials
 

Style overflow Property

< Style Object

Example

Use the overflow property to scroll overflowing content:

document.getElementById("myDIV").style.overflow = "scroll";
Try it Yourself »

Definition and Usage

The overflow property sets or returns what to do with content that renders outside the element box.

Tip: If you want to hide the scrollbars of the entire document, use the overflow property on the body or the html element.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The overflow property is supported in all major browsers.


Syntax

Return the overflow property:

object.style.overflow

Set the overflow property:

object.style.overflow="visible|hidden|scroll|auto|initial|inherit"

Property Values

Value Description
visible Content is NOT clipped and may be shown outside the element box. This is default
hidden Content outside the element box is not shown
scroll Scroll bars are added, and content is clipped when necessary
auto Content is clipped and scroll bars are added when necessary
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: visible 
Return Value: A String, representing the content that renders outside the element box
CSS Version CSS2

More Examples

Example

Use the overflow property to hide overflowing content:

document.getElementById("myDiv").style.overflow = "hidden";
Try it Yourself »

Example

Return the overflow property:

alert(document.getElementById("myDiv").style.overflow);
Try it Yourself »

Related Pages

CSS tutorial: CSS Positioning

CSS reference: overflow property


< Style Object