CSS - overflow-y Property
CSS overflow-y property determines how the content of a block-level element is displayed when it exceeds the element's top and bottom edges.
Possible Values
-
visible − The overflow content is displayed outside the element's boundaries.
-
hidden − The content is clipped, and any overflow is not visible.
-
clip − The content of an element is clipped ,and does not overflow the element's top and bottom edges.
-
scroll − The element is made scrollable by adding a scroll bar.
-
auto − A scroll bar is added to the element so that the user can view its overflow content.
Applies to
All the HTML elements.
DOM Syntax
object.style.overflowY = "visible|hidden|clip|scroll|auto";
CSS overflow-y - With visible & hidden Values
Following example demonstrates, when overflow-y property is set to visible it allows content to overflow its padding box at the top and bottom edges, or when set to hidden, it hides any content that overflows.
<html> <head> <style> .container { display:flex; } div.overflow-y-visible { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-y: visible; margin-right: 100px; } h4 { text-align: center; color: #D90F0F; } div.overflow-y-hidden { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-y: hidden; } </style> </head> <body> <div class="container"> <div class="overflow-y-visible"> <h4>Tutorialspoint CSS Overflow-y Visible</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> <div class="overflow-y-hidden"> <h4>Tutorialspoint CSS Overflow-y Hidden</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> </div> </body> </html>
CSS overflow-y - clip Value
The overflow-y: clip property hides any vertical overflow that exceeds the padding box of an element. No scrollbars are added.
Example
Here is an example −
<html> <head> <style> div.overflow-y-clip { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-y: clip; } h4 { text-align: center; color: #D90F0F; } </style> </head> <body> <div class="overflow-y-clip"> <h4>Tutorialspoint CSS Overflow-y Clip</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> </body> </html>
CSS overflow-y - With scroll & auto Values
The overflow-y property can be set to scroll or auto. The scroll value adds a scrollbar to the element if its content overflows its top and bottom edges.
The auto value adds a scrollbar to the element only if its content overflows its top and bottom edges.
<html> <head> <style> .container { display:flex; } div.overflow-y-scroll { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-y: scroll; margin-right: 100px; } h4 { text-align: center; color: #D90F0F; } div.overflow-y-auto { background-color: #2fe262; border: 2px solid #000000; width: 170px; height: 160px; overflow-y: auto; } </style> </head> <body> <div class="container"> <div class="overflow-y-scroll"> <h4>Tutorialspoint CSS Overflow-y Scroll</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> <div class="overflow-y-auto"> <h4>Tutorialspoint CSS Overflow-y Auto</h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et </div> </div> </body> </html>
To Continue Learning Please Login
Login with Google