Javascript Reference - HTML DOM Style overflowX Property

The overflowX property sets and gets how to deal with overflowing content in X axis.

Browser Support


`overflowX`	Yes	9.0	Yes	Yes	Yes

Syntax

Return the overflowX property:

var v = object.style.overflowX

Set the overflowX property:

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

Property Values

Value	Description
visible	The content is not clipped, and it may render outside the content box
hidden	The overflowing content is clipped and no scrolling is provided
scroll	The overflowing content is clipped and a scrolling is provided
auto	Provide a scrolling for overflowing content
initial	Sets to default value.
inherit	Inherits from parent element.

Technical Details

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

Example

The following code shows how to set to scroll horizontally.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!-- ww  w  .java  2  s  .  c o  m-->
    border: 1px solid black;
    background-color: lightblue;
    width: 200px;
    height: 210px;
    white-space: nowrap;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">
this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. 
this is a test. this is a test. this is a test. 
</div>
<script>
function myFunction() {
    document.getElementById("myDIV").style.overflowX = "scroll";
}
</script>
</body>
</html>

The code above is rendered as follows: