overflow-y
The overflow-y CSS property specifies the handling of overflow in the vertical direction.
CSS
JS
object.style.overflowY = "value";
Values
<'overflow-y'> = visible | hidden | clip | scroll | auto
visible
There is no special handling of overflow, the box's content is rendered outside the box if positioned there.
hidden
The box's content is clipped to its padding box and the UA must not provide any scrolling user interface to view the content outside the clipping region, nor allow scrolling by direct intervention of the user.
clip
Like hidden, but also forbids scrolling.
scroll
Indicates that the content is clipped to the padding box, but can be scrolled into view.
auto
Automatically specified by the user agent.
Initial
auto
clip
<!doctype html>
<html>
<head>
<style>
blockquote {
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 125px;
}
cite {
display: block;
text-align: right;
}
div {
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
overflow-y: clip;
width: 100px;
}
</style>
</head>
<body>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
hidden
<!doctype html>
<html>
<head>
<style>
blockquote {
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 125px;
}
cite {
display: block;
text-align: right;
}
div {
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
overflow-y: hidden;
width: 100px;
}
</style>
</head>
<body>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
scroll
<!doctype html>
<html>
<head>
<style>
blockquote {
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 125px;
}
cite {
display: block;
text-align: right;
}
div {
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
overflow-y: scroll;
width: 100px;
}
</style>
</head>
<body>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
visible
<!doctype html>
<html>
<head>
<style>
blockquote {
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 125px;
}
cite {
display: block;
text-align: right;
}
div {
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
overflow-y: visible;
width: 100px;
}
</style>
</head>
<body>
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
blockquote {
border-style: dashed;
border-width: thin;
margin-left: 50px;
margin-top: 50px;
width: 125px;
}
cite {
display: block;
text-align: right;
}
div {
border-color: red;
border-style: solid;
border-width: thin;
height: 100px;
width: 100px;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("div")[0].style.overflowY = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="auto">
<input onmouseover="mouseover(value)" type="button" value="clip">
<input onmouseover="mouseover(value)" type="button" value="hidden">
<input onmouseover="mouseover(value)" type="button" value="scroll">
<input onmouseover="mouseover(value)" type="button" value="visible">
<div>
<blockquote>
<p>I didn't like the play, but then I saw it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>
</body>
</html>
Internal
External