Hướng dẫn chuyên gia: Ẩn thanh cuộn trong CSS mà không ảnh hưởng trải nghiệm người dùng

Để ẩn thanh cuộn sử dụng CSS, chúng ta sẽ hiểu các phương pháp 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ổ hiển thị. Chúng ta có thể ẩn thanh cuộn trong khi vẫn duy trì chức năng cuộn bằng thuộc tính overflow.

Cú pháp

selector { overflow-x: value; overflow-y: value; }
/* Hoặc viết tắt */
selector { overflow: value; }

Các giá trị có thể

Phương pháp 1: Ẩn thanh cuộn dọc

Để ẩn thanh cuộn dọc trong khi giữ cuộn ngang hoạt động, đặ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">
    Đây là một dòng văn bản rất dài sẽ vượt quá chiều rộng container và yêu cầu cuộn ngang để xem hoàn toàn.
  </div>
  <p>Nội dung thêm ở đây thường sẽ gây cuộn dọc.</p>
  <p>Nhưng thanh cuộn dọc bị ẩn.</p>
</div>
</body>
</html>

Một container có viền với thanh cuộn ngang hiển thị ở dưới, nhưng không có thanh cuộn dọc. Nội dung mở rộng ngang và có thể cuộn trái/phải.

Phương pháp 2: Ẩn thanh cuộn ngang

Để ẩn thanh cuộn ngang trong khi giữ cuộn dọc hoạt động, đặ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>Đoạn văn một với nội dung văn bản bình thường.</p>
    <p>Đoạn văn hai với thêm nội dung.</p>
    <p>Đoạn văn ba thêm nữa văn bản.</p>
    <p>Đoạn văn bốn để tạo tràn.</p>
    <p>Đoạn văn năm cho cuộn dọc.</p>
  </div>
</div>
</body>
</html>

Một container có viền với thanh cuộn dọc hiển thị ở bên phải, nhưng không có thanh cuộn ngang. Nội dung mở rộng dọc và có thể cuộn lên/xuống.

Phương pháp 3: Ẩn cả hai thanh cuộn

Để ẩn hoàn toàn cả thanh cuộn ngang và dọc, đặt cả overflow-x và overflow-y thành 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>Nội dung này mở rộng cả ngang và dọc vượt quá giới hạn container.</p>
    <p>Tuy nhiên, không có thanh cuộn nào hiển thị, nên nội dung tràn đơn giản bị cắt.</p>
    <p>Người dùng không thể cuộn để xem nội dung ẩn.</p>
  </div>
</div>
</body>
</html>

Một container có viền không có thanh cuộn hiển thị. Nội dung vượt quá ranh giới container bị cắt và ẩn khỏi tầm nhìn.

Kết luận

Ẩn thanh cuộn sử dụng thuộc tính CSS overflow 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 kiểm soát chọn lọc cuộn ngang và dọc với thuộc tính overflow-x và overflow-y.