Thuộc tính overflow-y trong CSS
Bùi Tấn Lực - 849
- 11/10/2025
Chức năng của Thuộc tính overflow-y trong CSS
Thuộc tính overflow-y trong CSS dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt chủ yếu theo chiều dọc, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.
Cú pháp của Thuộc tính overflow-y trong CSS
overflow-y: giatri;
giatri: Giá trị để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt chủ yếu theo chiều dọc (Ví dụ: visible, scroll, overlay,....)
Các giá trị của Thuộc tính overflow-y trong CSS
auto: Hiện thanh cuộn chiều dọc nếu nội dung theo chiều dọc bị tràn, hiện thanh cuộn chiều ngang nếu nội dung theo chiều ngang bị tràn.
clip: Ẩn nội dung bị tràn ra ngoài phần tử HTML theo chiều dọc còn chiều ngang khổng ẩn.
hidden: Ẩn nội dung bị tràn ra ngoài phần tử HTML theo chiều dọc còn chiều ngang sẽ hiện thanh cuộn nếu tràn theo chiều ngang.
overlay: Hiện thanh cuộn chiều dọc nếu nội dung theo chiều dọc bị tràn, hiện thanh cuộn chiều ngang nếu nội dung theo chiều ngang bị tràn.
scroll: Hiện thanh cuộn chiều dọc mặc dù chưa có nội dung bị tràn, nếu tràn theo chiều ngang sẽ hiện thanh cuộn ngang.
visible: Không ẩn nội dung bị tràn lẫn chiều ngang và chiều dọc.
Code Thuộc tính overflow-y trong CSS
overflow-y: auto;
overflow-y: clip;
overflow-y: hidden;
overflow-y: overlay;
overflow-y: scroll;
overflow-y: visible;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính overflow-y trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:32%; float:left; height:150px; background:#ddd; margin-right:1%; padding:10px; margin-bottom:15px }
</style>
</head>
<body>
<h1>Code Thuộc tính overflow-y trong CSS</h1>
<p>Dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt chủ yếu theo chiều dọc, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình:</p>
<div style="overflow-y: auto;">
<h4>overflow-y: auto;</h4>
<p>Thuộc tính overflow-y trongvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv CSS dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-y: clip;">
<h4>overflow-y: clip;</h4>
<p>Thuộc tính overflow-y trong CSSvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-y: hidden;">
<h4>overflow-y: hidden;</h4>
<p>Thuộc tính overflow-y trong CSS dùngffffffffffffffffffffffffffffffffffffffffff để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-y: overlay;">
<h4>overflow-y: overlay;</h4>
<p>Thuộc tính overflow-y trong CSSvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-y: scroll;">
<h4>overflow-y: scroll;</h4>
<p>Thuộc tính overflow-ywwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww trong CSS dùng để quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
<div style="overflow-y: visible;">
<h4>overflow-y: visible;</h4>
<p>Thuộc tính overflow-y trong CSS dùng đểfffffffffffffffffffffffffffffffffffffff quy định cách xem nội dung trong phần tử HTML bằng cách cuộn trang hay ẩn bớt, thuộc tính này dùng cho các phần tử HTML có giới hạn chiều rộng và chiều cao, dành cho những nội dung tràn màn hình.</p>
</div>
</body>
</html>
Cách xử lý lỗi thanh cuộn dọc khi sử dụng overflow-y
Trong thực tế, overflow-y có thể không hoạt động như mong muốn nếu phần tử chưa được giới hạn chiều cao hoặc nội dung chưa thực sự vượt khỏi vùng hiển thị. Khi gặp lỗi, nên kiểm tra lần lượt kích thước phần tử, giá trị của overflow-y và mối quan hệ với các thuộc tính liên quan.
overflow-y không xuất hiện thanh cuộn dù nội dung bị tràn
Trường hợp này thường xảy ra khi phần tử không có height hoặc max-height để tạo ra giới hạn hiển thị. Khi chiều cao của phần tử vẫn có thể tăng theo nội dung, trình duyệt không có lý do để tạo vùng cuộn dọc.
Có thể giới hạn chiều cao rồi dùng overflow-y: auto để thanh cuộn chỉ xuất hiện khi nội dung vượt quá kích thước cho phép.
.box {
max-height: 200px;
overflow-y: auto;
}
Với cách này, nội dung ngắn vẫn hiển thị bình thường, còn nội dung dài sẽ được đưa vào vùng cuộn thay vì làm phần tử kéo dài vô hạn.
Thanh cuộn xuất hiện nhưng không thể cuộn
Nếu thanh cuộn đã xuất hiện nhưng thao tác cuộn không di chuyển nội dung, cần kiểm tra xem phần tử có thực sự chứa phần nội dung vượt quá chiều cao hay không. Đồng thời, hãy kiểm tra các phần tử cha có đang giới hạn vùng hiển thị hoặc thiết lập overflow theo cách làm cản trở thao tác hay không.
Một nguyên nhân khác là nội dung bên trong được bố trí bằng position hoặc các cơ chế layout đặc biệt khiến kích thước thực tế của phần tử không phản ánh phần nội dung nhìn thấy. Khi đó, nên kiểm tra kích thước của phần tử trực tiếp chứa nội dung trước khi thay đổi thêm thuộc tính CSS.
Cách kết hợp overflow-y với height và max-height
height phù hợp khi muốn vùng nội dung có chiều cao cố định, trong khi max-height linh hoạt hơn vì chỉ giới hạn chiều cao tối đa. Cả hai đều có thể kết hợp với overflow-y để tạo vùng cuộn dọc.
.content {
height: 300px;
overflow-y: auto;
}
Nếu không muốn vùng nội dung luôn chiếm đủ 300px, có thể dùng max-height:
.content {
max-height: 300px;
overflow-y: auto;
}
Đây thường là lựa chọn phù hợp cho danh sách, hộp thông báo, khu vực xem nội dung dài hoặc các thành phần có lượng dữ liệu thay đổi.
Những lỗi thường gặp khi đặt overflow-y: auto
- Không đặt height hoặc max-height nên phần tử tiếp tục mở rộng theo nội dung.
- Đặt chiều cao cho phần tử nhưng nội dung thực tế chưa vượt qua giới hạn đó nên không có thanh cuộn.
- Vô tình đặt overflow: hidden ở phần tử cha khiến nội dung hoặc vùng cuộn bị che khuất.
- Kết hợp nhiều thuộc tính overflow ở các cấp phần tử khác nhau làm khó xác định vùng nào đang chịu trách nhiệm cuộn.
- Dùng overflow-y: scroll khi không cần thiết, khiến thanh cuộn có thể luôn được hiển thị dù nội dung chưa bị tràn.
Khi xử lý lỗi, cách đơn giản nhất là xác định đúng phần tử cần cuộn, giới hạn chiều cao cho phần tử đó rồi mới chọn overflow-y: auto hoặc overflow-y: scroll tùy nhu cầu.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính overflow-y trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
