Javascript Reference - HTML DOM Style overflow Property

The overflow property sets or gets how to deal with overflowing content.

Browser Support


`overflow`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the overflow property:

var v = object.style.overflow

Set the overflow property:

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

Property Values

Value	Description
visible	Default. Content is not clipped and may be shown outside the element box.
hidden	Hide the overflowing content
scroll	Add Scroll bars, clip content
auto	clip content and add scroll bars when necessary
initial	Set to default value.
inherit	Inherit from its parent element.

Technical Details

Default Value:	visible
Return Value:	A string representing the overflow property
CSS Version	CSS2

Example

The following code shows how to set the overflow property to scroll.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from   w  w  w.  jav  a 2 s  .com-->
    border: 1px solid black;
    background-color: lightblue;
    width: 300px;
    height: 210px;
    overflow: visible;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.overflow = "scroll";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to set the overflow property to hidden.


<!DOCTYPE html>
<html>
<head>
<style>
div {<!--from  ww  w  .j a va2  s.c o  m-->
    border: 1px solid red;
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>

<div id="myDiv">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<button type="button" onclick="myFunction()">Hide overflow</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.overflow = "hidden";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the overflow property.


<!DOCTYPE html>
<html>
<body>
<!--  w w  w.  ja  va2 s  .c o m-->
<div id="myDiv" style="border:1px solid red;width:100px;height:100px;overflow:scroll;">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<br>
<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.overflow);
}
</script>

</body>
</html>

The code above is rendered as follows: