Style overflow Property
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
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
