Ẩn Scrollbar (Thanh cuộn) với CSS

Scrollbar và Trải nghiệm Người dùng (UX)

Người dùng quen với trải nghiệm điều hướng nhất định. Ví dụ: logo góc trên trái về homepage. Nếu không? Nếu mọi thứ làm ngược kỳ vọng? Đặc biệt, nếu scrollbar tồn tại nhưng cuộn chuột/kéo trackpad không có phản ứng — đó là UX tồi.

Scrollbar cho biết có nội dung cần cuộn. Không thấy scrollbar thường vì 2 lý do:

1. Nội dung vừa khít viewport (không cần cuộn).
2. Thiết kế ẩn scrollbar mặc định, chỉ hiện khi bắt đầu cuộn (hoặc dùng mũi tên động).

Triển khai scrollbar đúng cách cải thiện UX, giữ chân người dùng.

Lưu ý: Chỉ dùng horizontal scrollbar khi ý định. Nếu xuất hiện ngẫu nhiên, thường do kích thước component sai. Đừng ẩn horizontal scrollbar khi chúng không nên có mặt.

Triển khai CSS (Cross-browser)

Không phải trình duyệt nào cũng hỗ trợ giống nhau. CSS dùng vendor prefixes (tiền tố trình duyệt) để hỗ trợ cross-browser:

Công cụ tự động thêm prefix (Autoprefixer, PostCSS) hoặc tra cứu caniuse/MDN để biết khi nào cần prefix.

Code ẩn Scrollbar

<style>
* {
  box-sizing: border-box;
  scrollbar-width: none; /* Firefox */
}
.container {
  width: 450px;
  border: 2px solid #666;
  background: lightgrey;
  overflow: scroll;
  min-height: 520px;
  margin: 0 auto;
}
.inner-container {
  position: absolute;
  left: 10px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.inner-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge mới */
}
</style>

<div class="container">
  <div class="inner-container">
    <div class="sample-text">... nội dung dài ...</div>
  </div>
</div>

Kết quả: Vẫn cuộn được nội dung nhưng không thấy scrollbar. Firefox dùng scrollbar-width: none, các trình duyệt WebKit dùng ::-webkit-scrollbar { display: none }.

Đây là một trong vài cách ẩn scrollbar. Hãy thử nghiệm để tìm cách phù hợp nhất.