Để ẩn thanh cuộn bằng CSS, chúng ta sẽ hiểu các cách tiếp cận khác nhau. Thanh cuộn là thành phần cốt lõi của trình duyệt web cho phép người dùng điều hướng các khu vực nội dung lớn hơn cửa sổ có thể xem được. Chúng ta có thể ẩn thanh cuộn trong khi vẫn duy trì chức năng cuộn bằng overflow tài sản.
Cú pháp
selector {
overflow-x: value;
overflow-y: value;
}
/* Or shorthand */
selector {
overflow: value;
}
Các giá trị có thể có
visible Nội dung không bị cắt bớt, có thể hiển thị bên ngoài phần tửhidden Nội dung bị cắt bớt và thanh cuộn bị ẩnscroll Nội dung bị cắt bớt nhưng thanh cuộn luôn hiển thịauto Thanh cuộn chỉ xuất hiện khi nội dung tràn ra Phương pháp 1:Ẩn thanh cuộn dọc
Để ẩn thanh cuộn dọc trong khi vẫn bật cuộn ngang, hãy đặt overflow-y: hidden và overflow-x: scroll
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-y: hidden;
overflow-x: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
white-space: nowrap;
width: 500px;
background-color: #f0f8ff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
This is a very long line of text that will extend beyond the container width and require horizontal scrolling to view completely.
</div>
<p>More content here that would normally cause vertical scrolling.</p>
<p>But the vertical scrollbar is hidden.</p>
</div>
</body>
</html>
A bordered container with horizontal scrollbar visible at the bottom, but no vertical scrollbar. The content extends horizontally and can be scrolled left/right.
Phương pháp 2:Ẩn thanh cuộn ngang
Để ẩn thanh cuộn ngang trong khi vẫn bật cuộn dọc, hãy đặt overflow-x: hidden và overflow-y: scroll
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #fff3cd;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This is paragraph one with normal text content.</p>
<p>This is paragraph two with more content.</p>
<p>This is paragraph three adding even more text.</p>
<p>This is paragraph four to create overflow.</p>
<p>This is paragraph five for vertical scrolling.</p>
</div>
</div>
</body>
</html>
A bordered container with vertical scrollbar visible on the right side, but no horizontal scrollbar. The content extends vertically and can be scrolled up/down.
Phương pháp 3:Ẩn cả hai thanh cuộn
Để ẩn hoàn toàn cả thanh cuộn ngang và dọc, hãy đặt cả hai overflow-x và overflow-y đến hidden
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
overflow: hidden;
border: 2px solid #333;
padding: 10px;
}
.content {
background-color: #d1ecf1;
width: 500px;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>This content extends both horizontally and vertically beyond the container boundaries.</p>
<p>However, no scrollbars are visible, so the overflowing content is simply clipped.</p>
<p>Users cannot scroll to see the hidden content.</p>
</div>
</div>
</body>
</html>
A bordered container with no visible scrollbars. Content that extends beyond the container boundaries is clipped and hidden from view.
Kết luận
Ẩn thanh cuộn bằng CSS overflow Properties tạo ra giao diện sạch hơn. Sử dụng overflow: hidden để ẩn hoàn toàn thanh cuộn hoặc điều khiển có chọn lọc cuộn ngang và dọc bằng overflow-x và overflow-y thuộc tính.
