overflow-y
Description
overflow-y property controls how to clip the top/bottom
edges of the content during overflow.
| Item | Value |
|---|---|
| Initial value | visible |
| Inherited | No. |
| Version | object.style.overflowY="scroll" |
| JavaScript syntax | object.style.overflowY="scroll" |
Syntax and Property Values
overflow-y: visible|hidden|scroll|auto|no-display|no-content;
The property values are listed in the following table.
| Value | Description |
|---|---|
| visible | do not clip the content |
| hidden | clip the content, and no scrolling |
| scroll | clip the content and scrolling is provided |
| auto | provide a scrolling for overflowing content |
| no-display | remove if the content cannot fit in the content box |
| no-content | hide if the content cannot fit in the content box |
Example
<html>
<body>
<div style="overflow-y:auto;
background-color:#ccccff;
width:200;
height:50">
This div element has an overflow-y property value of auto.
This div element has an overflow-y property value of auto.
This div element has an overflow-y property value of auto.
This div element has an overflow-y property value of auto.
This div element has an overflow-y property value of auto.
</div><!--from w w w .ja v a2s . co m-->
<div style="overflow-y:scroll;
background-color:#ffffcc;
width:200;
height:50">
This div element has an overflow-y property value of scroll.
This div element has an overflow-y property value of scroll.
This div element has an overflow-y property value of scroll.
This div element has an overflow-y property value of scroll.
This div element has an overflow-y property value of scroll.
</div>
</body>
</html>
The code above generates the following result.
