Thuộc tính overflow-y trong CSS chỉ định cách nội dung hiển thị khi nó tràn. Nội dung tràn khỏi cạnh trên và dưới của một phần tử block-level. Nội dung có thể bị cắt, ẩn hoặc thanh cuộn hiển thị tùy theo giá trị.
Cú pháp:
overflow-y: scroll | hidden | visible | auto
Giá trị thuộc tính:
- Scroll: Nếu giá trị gán cho thuộc tính là "scroll" nội dung sẽ bị cắt. Nội dung được cắt để vừa với phần tử và thanh cuộn sẽ xuất hiện. Trình duyệt hiển thị thanh cuộn để giúp cuộn nội dung bị tràn bất kể nội dung có bị cắt hay không.
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS overflow-y Property
</title>
<style>
.content {
background-color: lightgreen;
height: 100px;
width: 250px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>The overflow-y Property</h1>
<!-- Below paragraph doesnot have a fixed width
or height and has no overflow set. So, it
will just take up the complete width of
it's parent to fit the content -->
<p>
The CSS overflow-y property specifies the
behavior of content when it overflows a
block-level element’s top and bottom edges.
The content may be clipped, hidden or a
scrollbar may be displayed as specified.
</p>
<h2>overflow-y: scroll</h2>
<!-- Below div element has fixed height and
width and thus overflow may occur. -->
<div class="content">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles,quizzes and interview questions.
The portal also has dedicated GATE preparation
and competitive programming sections.
</div>
</body>
</html>
Đầu ra:
- Hidden: Khi gán "hidden" làm giá trị cho thuộc tính nội dung bị cắt. Nội dung được cắt để vừa với phần tử và không có thanh cuộn nào được cung cấp. Nội dung bị ẩn đi.
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS overflow-y Property
</title>
<style>
.content {
background-color: lightgreen;
height: 100px;
width: 250px;
overflow-y: hidden;
}
</style>
</head>
<body>
<h1>The overflow-y Property</h1>
<!-- Below paragraph doesnot have a fixed width
or height and has no overflow set. So, it
will just take up the complete width of
it's parent to fit the content -->
<p>
The CSS overflow-y property specifies the
behavior of content when it overflows a
block-level element’s top and bottom edges.
The content may be clipped, hidden or a
scrollbar may be displayed as specified.
</p>
<h2>overflow-y: scroll</h2>
<!-- Below div element has fixed height and
width and thus overflow may occur. -->
<div class="content">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles,quizzes and interview questions.
The portal also has dedicated GATE preparation
and competitive programming sections.
</div>
</body>
</html>
Đầu ra:
- Visible: Nếu giá trị được gán cho thuộc tính "overflow-y" là "visible" nội dung không bị cắt. Nội dung có thể tràn ra ngoài phần trên hoặc dưới của phần tử chứa.
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS overflow-y Property
</title>
<style>
.content {
background-color: lightgreen;
height: 100px;
width: 250px;
overflow-y: visible;
}
</style>
</head>
<body>
<h1>The overflow-y Property</h1>
<!-- Below paragraph doesnot have a fixed width
or height and has no overflow set. So, it
will just take up the complete width of
it's parent to fit the content -->
<p>
The CSS overflow-y property specifies the
behavior of content when it overflows a
block-level element’s top and bottom edges.
The content may be clipped, hidden or a
scrollbar may be displayed as specified.
</p>
<h2>overflow-y: scroll</h2>
<!-- Below div element has fixed height and
width and thus overflow may occur. -->
<div class="content">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles,quizzes and interview questions.
The portal also has dedicated GATE preparation
and competitive programming sections.
</div>
</body>
</html>
Đầu ra:
- Auto: Hành vi của auto phụ thuộc vào nội dung. Thanh cuộn chỉ được thêm khi nội dung tràn ra ngoài. Điều này khác với giá trị scroll, thanh cuộn được thêm bất kể có tràn hay không.
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS overflow-y Property
</title>
<style>
.content {
background-color: lightgreen;
height: 100px;
width: 250px;
overflow-y: auto;
}
</style>
</head>
<body>
<h1>The overflow-y Property</h1>
<!-- Below paragraph doesnot have a fixed width
or height and has no overflow set. So, it
will just take up the complete width of
it's parent to fit the content -->
<p>
The CSS overflow-y property specifies the
behavior of content when it overflows a
block-level element’s top and bottom edges.
The content may be clipped, hidden or a
scrollbar may be displayed as specified.
</p>
<h2>overflow-y: scroll</h2>
<!-- Below div element has fixed height and
width and thus overflow may occur. -->
<div class="content">
GeeksforGeeks is a computer science portal
with a huge variety of well written and
explained computer science and programming
articles,quizzes and interview questions.
The portal also has dedicated GATE preparation
and competitive programming sections.
</div>
</body>
</html>
Đầu ra:
Các trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi thuộc tính overflow-y được liệt kê dưới đây:
- Chrome 1
- Edge 12
- Internet Explorer 5
- Firefox 3.5
- Opera 9.5
- Safari 3