Javascript Reference - HTML DOM Style overflowY Property

The overflowY property gets and sets how to deal with the overflowed content.

Browser Support


`overflowY`	Yes	9.0	Yes	Yes	Yes

Syntax

Return the overflowY property:

var v = object.style.overflowY

Set the overflowY property:

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

Property Values

Value	Description
visible	The overflowed content is not clipped, and it may be rendered outside the content box
hidden	The overflowed content is clipped and no scrolling is provided
scroll	The overflowed content is clipped and a scrolling is provided
auto	Use scrolling to for overflowing boxes
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	visible
Return Value:	A string representing the overflow-y property.
CSS Version	CSS3

Example

The following code shows how to set to scroll vertically.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--from  w w  w .ja v  a  2 s  .  c o  m-->
    border: 1px solid black;
    background-color: lightblue;
    width: 200px;
    height: 110px;
}
</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/>
</div>

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

</body>
</html>

The code above is rendered as follows: