Style overflow Property

Definition and Usage

overflow Property setting or return how to handle the content displayed outside the element box.

Tip:To hide the entire document's scrollbar, use the overflow property of the body or html element.

See also:

CSS Tutorial:CSS Overflow

CSS Tutorial:CSS Positioning

CSS Reference Manual:overflow Property

Example

Example 1

Use overflow property to scroll overflow content:

document.getElementById("myDIV").style.overflow = "scroll";

Try It Yourself

Example 2

Use overflow property to hide overflow content:

document.getElementById("myDiv").style.overflow = "hidden";

Try It Yourself

Example 3

Return overflow property:

alert(document.getElementById("myDiv").style.overflow);

Try It Yourself

Syntax

Return overflow property:

object.style.overflow

Set overflow property:

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

Attribute Value

Value Description
visible Content is not cropped and may appear outside the element box. Default.
hidden Do not display content outside the element box.
scroll Add a scrollbar and crop content as necessary.
auto Trim content as necessary and add a scrollbar.
initial Set this property to its default value. See initial.
inherit Inherit this property from its parent element. See inherit.

Technical Details

Default value: visible
Return value: A string that represents the content rendered outside the element box.
CSS Version: CSS2

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη