CSS Property overflow-y
overflow-y property controls how to clip the top/bottom
edges of the content during overflow.
Summary
| Item | Value |
|---|---|
| Initial value | visible |
| Inherited | No. |
| Version | object.style.overflowY="scroll" |
| JavaScript syntax | object.style.overflowY="scroll" |
CSS Syntax
overflow-y: visible|hidden|scroll|auto|no-display|no-content;
Property Values
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 |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
overflow-y |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use overflow-y CSS property.
<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><!-- ww w . j ava 2 s . c om-->
<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>