Javascript DOM CSS Style overflowX Property

Introduction

Scroll horizontally if the text overflows the element's content area:

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

Click the button to change the overflowX property of the DIV element:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//from  w ww. j a  v a  2  s. c om
  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">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,<br> sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat.<br> Ut wisi enim ad minim veniam,<br> quis nostrud exerci tation 
laoreet dolore magna aliquam erat volutpat.<br> Ut wisi enim ad minim veniam,<br> quis nostrud exerci tation 
laoreet dolore magna aliquam erat volutpat.<br> Ut wisi enim ad minim veniam,<br> quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

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

</body>
</html>

The overflowX property specifies what to do with the left/right edges of the content - if it overflows the element's content area.

Use the overflowY property to determine clipping at the top and bottom edges.

Property Values

Value	Description
visible	`Default`. The content is not clipped, and it may be rendered outside the content box
hidden	content clipped and no scrolling mechanism is provided
scroll	content clipped and a scrolling mechanism is provided
auto	Should cause a scrolling mechanism to be provided for overflowing boxes
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The overflowX property returns a String representing the overflow-x property of an element.

Previous Next