Trong quá trình thiết kế giao diện website, có những lúc nội dung trên giao diện của bạn nhiều đến mức tràn ra ngoài khung ảnh hưởng đến thẩm mỹ. Lúc này, scrollbar (thanh cuộn) chính là giải pháp hàng đầu, nó cho phép người dùng xem thêm mà không làm vỡ layout.
Với Bootstrap, bạn không cần viết CSS thủ công cho overflow, mà có thể tận dụng các overflow utilities sẵn có để thêm, điều chỉnh hoặc ẩn scrollbar nhanh chóng. Ngoài ra, Bootstrap còn hỗ trợ các tình huống thực tế như modal, offcanvas, dropdown, bảng dữ liệu và scrollspy. Bài viết này sẽ hướng dẫn chi tiết cho bạn cách sử dụng scrollbar trong Bootstrap, từ cơ bản đến nâng cao.
Giới thiệu về Scrollbar trong Bootstrap
Scrollbar là gì?
Scrollbar (thanh cuộn) là phần tử giao diện cho phép người dùng di chuyển nội dung vượt quá kích thước khung chứa. Thanh cuộn có thể nằm theo chiều dọc hoặc ngang, thường xuất hiện khi nội dung dài hơn vùng hiển thị.
Ví dụ: khi bạn có một đoạn văn bản dài trong một hộp nhỏ, scrollbar sẽ tự động xuất hiện để hỗ trợ cuộn.
Scrollbar trong Bootstrap có phải là một component riêng?
Một điểm chúng ta cần làm rõ là Bootstrap không cung cấp một component riêng có tên “Scrollbar”. Scrollbar vốn là cơ chế mặc định của CSS, được kiểm soát thông qua thuộc tính overflow.
Trong hệ thống của Bootstrap, việc làm việc với scrollbar được hỗ trợ dưới hai hình thức chính:
- Các lớp tiện ích (Utilities Classes): Bootstrap định nghĩa sẵn bốn class .overflow-auto, .overflow-hidden, .overflow-visible và .overflow-scroll để bạn có thể áp dụng nhanh mà không cần viết CSS thủ công
- Tích hợp trong các component: Một số thành phần của Bootstrap như Modal, Offcanvas, Dropdown và Table đã được thiết kế để xử lý tình huống nội dung tràn, kèm cơ chế hiển thị scrollbar khi cần
Điều này giúp nhà phát triển tiết kiệm thời gian triển khai, đảm bảo sự đồng bộ về giao diện, đồng thời giảm thiểu lỗi so với cách viết CSS tùy ý cho từng trường hợp.
Bootstrap hỗ trợ scrollbar như thế nào?
Trong giao diện web, bạn hoàn toàn có thể tự viết CSS để tạo scrollbar. Giả sử bạn có một hộp chứa danh sách thông báo, chiều cao cố định, nội dung dài hơn thì phải cuộn xuống. Cách thủ công sẽ như sau:
<div class="custom-box">
<p>Thông báo 1: Hệ thống sẽ bảo trì vào 23:00 tối nay.</p>
<p>Thông báo 2: Có bản cập nhật mới cho ứng dụng.</p>
<p>Thông báo 3: Tài khoản của bạn vừa được đăng nhập thành công.</p>
<p>Thông báo 4: Một người dùng đã gửi lời mời kết bạn.</p>
<p>Thông báo 5: Máy chủ sẽ khởi động lại trong vòng 5 phút nữa.</p>
</div>
<style>
.custom-box {
border: 1px solid #ddd;
max-height: 150px;
overflow-y: auto;
padding: 1rem;
}
</style>Kết quả: Khi nội dung vượt quá 150px, một scrollbar dọc xuất hiện để người dùng cuộn.
Với cách triển khai này, bạn phải nhớ cú pháp và phải viết CSS cho overflow-y, max-height, padding, thậm chí thêm border, background… mỗi lần dùng. Điều này gây mức thời gian và có thể mất đồng bộ khi làm việc với nhiều người, nhiều cách viết.
Đối với Bootstrap, bạn có thể tận dụng các Utilities có sẵn để thực hiện điều này:
<div class="border overflow-auto" style="max-height: 150px;">
<p>Thông báo 1: Hệ thống sẽ bảo trì vào 23:00 tối nay.</p>
<p>Thông báo 2: Có bản cập nhật mới cho ứng dụng.</p>
<p>Thông báo 3: Tài khoản của bạn vừa được đăng nhập thành công.</p>
<p>Thông báo 4: Một người dùng đã gửi lời mời kết bạn.</p>
<p>Thông báo 5: Máy chủ sẽ khởi động lại trong vòng 5 phút nữa.</p>
</div>Trong đó:
.borderthay thế cho việc tự viếtborder: 1px solid #ddd.overflow-autochính là class tiện ích Bootstrap đã định nghĩa sẵn. Khi nội dung vượt khung, tự động hiện scrollbarstyle=“max-height: 150px;”chỉ cần inline hoặc có thể dùngutility h-*/min-vh-*của Bootstrap
Hình ảnh hiển thị:
Kết quả cùng một tính năng, nhưng với Bootstrap bạn không cần viết CSS riêng, chỉ cần gắn class. Nhờ vậy:
- Tiết kiệm thời gian (copy class là dùng được)
- Giao diện đồng bộ với toàn bộ hệ thống (màu sắc, border, spacing theo Bootstrap)
- Dễ mở rộng: muốn scroll ngang thì thay bằng
.overflow-x-auto, muốn ẩn thì đổi.overflow-hidden, muốn responsive thì thêm.overflow-md-auto…
Các lớp Overflow Utilities trong Bootstrap
Các class điều khiển scrollbar
Trong CSS, thuộc tính overflow quyết định cách trình duyệt hiển thị phần nội dung vượt quá kích thước của phần tử chứa. Tùy theo giá trị được đặt, nội dung có thể được hiển thị tràn ra ngoài, bị ẩn đi, hoặc xuất hiện thanh cuộn để người dùng truy cập.
Bootstrap cung cấp 4 lớp tiện ích (utilities) cho thuộc tính overflow:
.overflow-auto: Đây là mặc định phổ biến khi bạn muốn cho phép cuộn chỉ khi nội dung vượt quá khung chứa. Nếu nội dung ít sẽ không có thanh cuộn, còn nếu nội dung dài hơnmax-heighthoặcmax-width, thanh cuộn sẽ xuất hiện. Class này thường dùng cho các danh sách động như thông báo, tin nhắn hoặc bình luận, nơi nội dung có thể ngắn hoặc dài tùy trường hợp.
Ví dụ:
<div class="border overflow-auto" style="max-height: 100px;">
<p>Dòng 1: Nội dung ngắn</p>
<p>Dòng 2: Nội dung ngắn</p>
<p>Dòng 3: Nội dung dài hơn một chút</p>
<p>Dòng 4: Nội dung dài sẽ vượt quá khung và hiển thị thanh cuộn</p>
<p>Dòng 5: Tiếp tục thêm nữa...</p>
</div>Trong đó, nội dung vượt chiều cao 100px, dẫn đến xuất hiện scroll dọc, nhưng không vượt quá chiều rộng nên không xuất hiện scroll ngang:
.overflow-hidden: Dùng khi bạn muốn chặn hiển thị phần nội dung vượt ra ngoài kích thước đã giới hạn. Tùy chọn này khiến người dùng không thể cuộn để xem phần bị che. Class này phù hợp với các thành phần giao diện như card, thumbnail hình ảnh hoặc phần preview nội dung, khi bạn muốn giữ bố cục cố định và không hiển thị phần dư.
Ví dụ:
<div class="border overflow-hidden" style="max-height: 100px;">
<p>Dòng 1: Nội dung ngắn</p>
<p>Dòng 2: Nội dung ngắn</p>
<p>Dòng 3: Nội dung dài hơn một chút</p>
<p>Dòng 4: Nội dung dài sẽ vượt quá khung và hiển thị thanh cuộn</p>
<p>Dòng 5: Tiếp tục thêm nữa...</p>Kết quả, scrollbar bị vô hiệu hóa, và nội dung bị che khuất:
.overflow-visible:Đây thường là tùy chọn mặc định của các phần tử. Với tùy chọn này, nếu nội dung vượt khỏi khung chứa vẫn sẽ hiển thị tràn ra ngoài, không có thanh cuộn. Ứng dụng của class này thường là các tooltip, popover hoặc badge, khi bạn cần nội dung hiển thị tràn ra ngoài container mà không bị cắt. Ví dụ:
<div class="border overflow-visible" style="max-height: 100px;">
<p>Dòng 1: Nội dung ngắn</p>
<p>Dòng 2: Nội dung ngắn</p>
<p>Dòng 3: Nội dung dài hơn</p>
<p>Dòng 4: Vượt quá khung, nhưng vẫn tràn ra ngoài khung viền</p>
<p>Dòng 5: Bạn sẽ thấy chữ “xuyên” ra ngoài hộp này</p>
</div>
.overflow-scroll:Thanh cuộn sẽ luôn được kích hoạt bất kể nội dung trong vùng chứa có nhiều hay ít. Khi nội dung không vượt quá khung chứa, thanh scrollbar sẽ trở nên dư thừa và tạo ra rãnh ở viền vùng chứa. Class này rất hữu ích trong khung chứa code, bảng log hoặc vùng dữ liệu cố định, nơi bạn muốn người dùng nhận biết ngay rằng khu vực này có thể cuộn. Ví dụ:
<div class="border overflow-scroll" style="max-height: 100px;">
<p>Dòng 1: Nội dung ngắn</p>
<p>Dòng 2: Nội dung ngắn</p>
<p>Dòng 3: Nội dung dài hơn</p>
<p>Dòng 4: Vượt quá khung, nhưng vẫn tràn ra ngoài khung viền</p>
<p>Dòng 5: Bạn sẽ thấy chữ “xuyên” ra ngoài hộp này</p>
</div>
<div class="mt-4 border overflow-scroll" style="max-height: 100px;">
<p>Dòng 1: Nội dung ngắn</p>
</div>
Lưu ý, ngay cả khi dùng overflow: scroll;, thanh cuộn có thể chỉ hiển thị khi người dùng thực hiện cuộn, chứ không luôn luôn hiển thị. Điều này do phụ thuộc vào cài đặt overlay scrollbars của hệ điều hành/trình duyệt (đặc biệt macOS). CSS không thể ép điều này nếu cài đặt đang ẩn.
Điều khiển scrollbar theo hai chiều
Bootstrap không có sẵn class để thêm scrollbar cho từng trục dọc và ngang. Nếu bạn cần điều khiển theo trục, bạn phải bổ sung các class với CSS thủ công. Ví dụ:
<style>
/* Điều khiển trục dọc */
.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-scroll { overflow-y: scroll !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
/* Điều khiển trục ngang */
.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-scroll { overflow-x: scroll !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
</style>Responsive overflow
Bootstrap cung cấp 4 lớp tiện ích để điều khiển scrollbar nhưng các lớp này mặc định không có biến thể theo breakpoint trong Bootstrap (ví dụ .overflow-sm-auto, .overflow-md-hidden…). Nếu bạn muốn thay đổi cách hiển thị scrollbar tùy theo kích thước màn hình, bạn có thể làm theo 2 cách:
CSS thuần với media queries
Với media queries, bạn định nghĩa class riêng cho từng breakpoint. Ví dụ:
- Trên màn hình nhỏ (mobile <576px): chỉ cho cuộn ngang, chặn cuộn dọc.
- Trên màn hình vừa (tablet ≥768px): chỉ cho cuộn dọc, chặn cuộn ngang.
<style>
@media (max-width: 575px) {
.ov-sm-x-auto-y-hidden { overflow-x: auto !important; overflow-y: hidden !important; }
}
@media (min-width: 768px) {
.ov-md-y-auto-x-hidden { overflow-y: auto !important; overflow-x: hidden !important; }
}
</style>
<div class="border ov-sm-x-auto-y-hidden ov-md-y-auto-x-hidden" style="max-height:200px;">
<!-- nội dung -->
</div>Dùng Bootstrap Utility API (Sass)
Nếu bạn build Bootstrap từ Sass, có thể bật responsive cho utility overflow:
// _custom.scss
$utilities: map-merge(
$utilities,
(
"overflow": (
property: overflow,
class: overflow,
responsive: true, // tạo .overflow-sm-auto, .overflow-md-hidden, ...
values: auto hidden visible scroll
)
)
);
// Thêm trục y/x nếu muốn (custom)
$utilities: map-merge(
$utilities,
(
"overflow-y": (
property: overflow-y,
class: overflow-y,
responsive: true,
values: auto hidden visible scroll
),
"overflow-x": (
property: overflow-x,
class: overflow-x,
responsive: true,
values: auto hidden visible scroll
)
)
);Sau khi biên dịch, bạn có thể dùng như sau:
<div class="border overflow-auto overflow-md-hidden" style="max-height: 180px;">
...
</div>
<div class="border overflow-y-auto overflow-y-lg-hidden" style="max-height: 220px;">
...
</div>Scrollbar trong các component của Bootstrap
Scrollbar trong modal
Modal trong Bootstrap mặc định sẽ khóa thanh cuộn của toàn bộ trang (<body>). Điều này đảm bảo khi modal mở, người dùng tập trung vào nội dung bên trong nó mà không cuộn lẫn với trang chính. Nhưng nếu modal có quá nhiều nội dung, bạn sẽ cần thanh cuộn nằm trong modal chứ không phải để trang web bị tràn.
Bootstrap hỗ trợ sẵn cách giải quyết với class .modal-dialog-scrollable. Khi sử dụng class này, phần nội dung (.modal-body) sẽ trở thành vùng cuộn, trong khi header và footer vẫn cố định phía trên và dưới.
Ví dụ:
<!-- Nút mở modal -->
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modalWithScroll">
Mở modal
</button>
<!-- Modal -->
<div class="modal fade" id="modalWithScroll" tabindex="-1" aria-labelledby="withScrollLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="withScrollLabel" class="modal-title">Tiêu đề</h5>
<button class="btn-close" data-bs-dismiss="modal" aria-label="Đóng"></button>
</div>
<div class="modal-body" style="max-height: 30vh; overflow-y: auto;">
<p>Nội dung dài</p>
<p>Đoạn 1...</p><p>Đoạn 2...</p><p>Đoạn 3...</p><p>Đoạn 4...</p>
<p>Đoạn 5...</p><p>Đoạn 6...</p><p>Đoạn 7...</p><p>Đoạn 8...</p>
<p>Đoạn 9...</p><p>Đoạn 10...</p><p>Đoạn 11...</p><p>Đoạn 12...</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
</div>
</div>
</div>
</div>Kết quả, scrollbar xuất hiện để cuộn nội dung của phần modal body:
Offcanvas với .offcanvas-body
Offcanvas là thành phần thường dùng để làm menu trượt từ cạnh trái hoặc phải. Do thiết kế thường cao bằng chiều cao toàn bộ trình duyệt, nếu nội dung nhiều hơn chiều cao này thì bạn cần cho phép người dùng cuộn trong phần .offcanvas-body.
Ví dụ:
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#sidebar">
Mở menu
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
<div class="offcanvas-header">
<h5 id="sidebarLabel">Menu</h5>
<button class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body overflow-scroll" style="max-height: 50vh;">
<p>Mục 1</p>
<p>Mục 2</p>
<p>Mục 3</p>
<p>Mục 4</p>
<p>Mục 5</p>
<p>Mục 6</p>
<p>Mục 7</p>
<p>Mục 8</p>
<p>Mục 9</p>
<p>Mục 10</p>
</div>
</div>Kết quả:
Scrollbar trong Dropdown menu
Một dropdown menu quá dài có thể tràn hết màn hình, khiến người dùng khó chọn lựa. Cách xử lý là đặt giới hạn chiều cao cho menu và thêm khả năng cuộn bên trong.
Ví dụ:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">
Chọn mục
</button>
<ul class="dropdown-menu overflow-auto" style="max-height: 200px;">
<li><a class="dropdown-item" href="#">Mục 1</a></li>
<li><a class="dropdown-item" href="#">Mục 2</a></li>
<li><a class="dropdown-item" href="#">Mục 3</a></li>
<li><a class="dropdown-item" href="#">Mục 4</a></li>
<li><a class="dropdown-item" href="#">Mục 5</a></li>
<li><a class="dropdown-item" href="#">Mục 6</a></li>
<li><a class="dropdown-item" href="#">Mục 7</a></li>
</ul>
</div>
Nhờ vậy, menu sẽ luôn gọn trong một khung cố định, nhưng vẫn dễ dàng cuộn để xem thêm lựa chọn.
Scrollbar trong Bảng dữ liệu (Table)
Trong thực tế, bảng dữ liệu thường có rất nhiều cột. Nếu cố ép tất cả cột hiển thị trong một khung nhỏ, chữ sẽ bị co lại khó đọc. Nếu để bảng rộng tự nhiên, nó có thể làm vỡ layout trên màn hình nhỏ.
Giải pháp là cho bảng cuộn theo chiều ngang (horizontal scroll) bằng cách bọc toàn bộ table trong thẻ div có bật scrollbar. Khi đó, người dùng chỉ cần kéo ngang để xem các cột tiếp theo, trong khi bố cục trang vẫn giữ nguyên. Ví dụ:
<div class="card-body p-0 overflow-auto">
<table class="table mb-0" style="min-width: 800px;">
<thead>
<tr>
<th>ID</th>
<th>Họ tên</th>
<th>Email</th>
<th>Vai trò</th>
<th>Ngày tạo</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lan</td>
<td>lan@example.com</td>
<td>Admin</td>
<td>2025-09-01</td>
</tr>
<tr>
<td>2</td>
<td>Minh</td>
<td>minh@example.com</td>
<td>User</td>
<td>2025-09-10</td>
</tr>
</tbody>
</table>
</divTrong đó:
- Dùng
.overflow-auto(class có sẵn trong Bootstrap) để bật thanh cuộn khi cần - Ví dụ dùng
min-width: 800px;để buộc bảng rộng hơn container, từ đó scrollbar ngang xuất hiện - Phần card-body giữ vai trò như “khung nhìn” (viewport), người dùng chỉ cần cuộn ngang trong đó
Hiển thị:
Bảng tổng hợp các class tiện ích thao tác với Scrollbar Bootstrap
| Class | Công dụng |
| .overflow-auto | Hiển thị thanh cuộn khi nội dung vượt khung |
| .overflow-hidden | Ẩn toàn bộ nội dung vượt khung, không tạo ra thanh cuộn |
| .overflow-visible | Hiển thị nội dung tràn ra khỏi khung, không tạo thanh cuộn |
| .overflow-scroll | Luôn bật vùng cuộn (dù ít nội dung) |
| .modal-dialog-scrollable | Cho phép nội dung modal-body cuộn trong modal |
| .offcanvas-body + .overflow-(auto/scroll) | Cho phép cuộn nội dung trong offcanvas |
| .dropdown-menu + .overflow-(auto/scroll) | Cuộn nội dung trong danh sách tùy chọn |
| .table-responsive (component) + .overflow-(auto/scroll) | Cho phép bảng (table) cuộn ngang trong màn hình nhỏ hoặc số lượng cột quá nhiều |
Scrollspy trong Bootstrap
Giới thiệu về Bootstrap Scrollspy
Scrollspy là một tính năng hữu ích của Bootstrap giúp bạn theo dõi vị trí cuộn hiện tại trong trang và tự động cập nhật trạng thái active của menu điều hướng (navigation).
Nói cách khác, khi người dùng cuộn nội dung, mục menu tương ứng trong thanh điều hướng sẽ được đánh dấu nổi bật. Đây là kỹ thuật thường thấy trong các trang landing page, documentation hoặc blog dài, nơi cần điều hướng nhanh đến từng phần nội dung.
Ví dụ thực tế: Bạn có một thanh menu bên trái với các mục: Giới thiệu, Tính năng, Liên hệ. Khi người dùng cuộn xuống phần “Tính năng”, menu sẽ tự động highlight mục đó. Nhờ vậy, người dùng luôn biết mình đang ở đâu trong trang.
Kích hoạt Scrollspy bằng data attribute
Bootstrap cho phép bạn bật Scrollspy mà không cần viết JavaScript thủ công, chỉ cần gắn data-bs-spy=“scroll” và các thuộc tính liên quan. Các bước cơ bản:
- Tạo thanh menu điều hướng với các link trỏ đến ID của từng section nội dung.
<nav id="navbar-example" class="navbar bg-light px-3 mb-3">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#section1">Giới thiệu</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Tính năng</a></li>
<li class="nav-item"><a class="nav-link" href="#section3">Hướng dẫn</a></li>
<li class="nav-item"><a class="nav-link" href="#section4">Liên hệ</a></li>
</ul>
</nav>- Bọc nội dung cần theo dõi trong một thẻ có thuộc tính:
data-bs-spy=“scroll”: bật Scrollspydata-bs-target=“#navbar-example”: trỏ đến menu cần cập nhậtdata-bs-offset=“...”: (tùy chọn) khoảng cách tính từ trên cùng khi xác định section active
<div data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="0" class="p-3 rounded-2 border overflow-auto position-relative" tabindex="0" style="height: 300px;">
<!-- Section 1 -->
<h4 id="section1">Giới thiệu</h4>
<p>Chào mừng bạn đến với ví dụ Scrollspy.</p>
<p>Đây là phần giới thiệu nội dung. Để Scrollspy hoạt động</p>
<p>Đây là một đoạn văn dài để bạn thấy rõ hiệu ứng khi cuộn.</p>
<!-- Section 2 -->
<h4 id="section2">Tính năng</h4>
<p>Chào mừng bạn đến với ví dụ Scrollspy.</p>
<p>Đây là phần giới thiệu nội dung. Để Scrollspy hoạt động</p>
<p>Đây là một đoạn văn dài để bạn thấy rõ hiệu ứng khi cuộn.</p>
<!-- Section 3 -->
<h4 id="section3">Hướng dẫn</h4>
<p>Chào mừng bạn đến với ví dụ Scrollspy.</p>
<p>Đây là phần giới thiệu nội dung. Để Scrollspy hoạt động</p>
<p>Đây là một đoạn văn dài để bạn thấy rõ hiệu ứng khi cuộn.</p>
<!-- Section 4 -->
<h4 id="section4">Liên hệ</h4>
<p>Chào mừng bạn đến với ví dụ Scrollspy.</p>
<p>Đây là phần giới thiệu nội dung. Để Scrollspy hoạt động</p>
<p>Đây là một đoạn văn dài để bạn thấy rõ hiệu ứng khi cuộn.</p>
</div>- Đảm bảo container nội dung có position: relative; (Bootstrap yêu cầu vậy để tính toán chính xác).
Code đầy đủ:
<!-- Thanh menu điều hướng -->
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#section1">Giới thiệu</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Tính năng</a></li>
<li class="nav-item"><a class="nav-link" href="#section3">Hướng dẫn</a></li>
<li class="nav-item"><a class="nav-link" href="#section4">Liên hệ</a></li>
</ul>
</nav>
<!-- Khung nội dung theo dõi scrollspy -->
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="p-3 rounded-2 border overflow-auto position-relative" tabindex="0" style="height: 300px;">
<!-- Section 1 -->
<h4 id="section1">Giới thiệu</h4>
<p>Chào mừng bạn đến với ví dụ Scrollspy.</p>
<p>Đây là phần giới thiệu nội dung. Để Scrollspy hoạt động</p>
<p>Đây là một đoạn văn dài để bạn thấy rõ hiệu ứng khi cuộn.</p>
<!-- Section 2 -->
<h4 id="section2">Tính năng</h4>
<p>Chào mừng bạn đến với ví dụ Scrollspy.</p>
<p>Đây là phần giới thiệu nội dung. Để Scrollspy hoạt động</p>
<p>Đây là một đoạn văn dài để bạn thấy rõ hiệu ứng khi cuộn.</p>
<!-- Section 3 -->
<h4 id="section3">Hướng dẫn</h4>
<p>Chào mừng bạn đến với ví dụ Scrollspy.</p>
<p>Đây là phần giới thiệu nội dung. Để Scrollspy hoạt động</p>
<p>Đây là một đoạn văn dài để bạn thấy rõ hiệu ứng khi cuộn.</p>
<!-- Section 4 -->
<h4 id="section4">Liên hệ</h4>
<p>Chào mừng bạn đến với ví dụ Scrollspy.</p>
<p>Đây là phần giới thiệu nội dung. Để Scrollspy hoạt động</p>
<p>Đây là một đoạn văn dài để bạn thấy rõ hiệu ứng khi cuộn.</p>
</div>Kết quả:
Một số lưu ý khi sử dụng Scrollbar trong Bootstrap
Khi làm việc với Bootstrap, bạn sẽ thường xuyên cần xử lý nội dung tràn (overflow). Đây là lúc scrollbar (thanh cuộn) xuất hiện. Nếu dùng không đúng cách, giao diện dễ bị vỡ bố cục hoặc gây khó chịu cho người dùng. Dưới đây là những lưu ý quan trọng bạn nên biết:
Scrollbar không phải lúc nào cũng hiển thị
Kể cả khi bạn đặt overflow: scroll;, việc thanh cuộn có hiển thị thường trực hay không còn phụ thuộc vào cài đặt hệ điều hành và trình duyệt.
- Trên macOS và một số cấu hình Windows, thanh cuộn dạng overlay chỉ hiện khi cuộn hoặc hover
- Nếu muốn luôn hiện, cần bật tùy chọn Always show scrollbars trong cài đặt hệ điều hành, hoặc dùng thư viện custom scrollbar như
SimpleBarhoặcOverlayScrollbars
Kết hợp với kích thước cố định
Để scrollbar hoạt động đúng, bạn cần giới hạn chiều cao hoặc chiều rộng của container (bằng height, max-height, width, max-width). Nếu không giới hạn, nội dung sẽ phình ra và không có gì để cuộn.
Tránh “nhảy layout” khi scrollbar xuất hiện
Khi thanh cuộn xuất hiện hoặc biến mất, bố cục trang có thể bị xô lệch (ví dụ khi mở modal). Để khắc phục, hãy dùng thuộc tính scrollbar-gutter của CSS. Điều này giúp trang web luôn chừa khoảng trống cho scrollbar, tránh hiện tượng nhảy layout:
<style>
body.modal-open {
scrollbar-gutter: stable;
}
</style>Các câu hỏi phổ biến về Scrollbar Bootstrap
Làm sao tùy chỉnh giao diện Scrollbar Bootstrap?
Bootstrap không cung cấp utilities để thay đổi màu sắc, độ rộng hay hình dạng scrollbar. Nếu muốn, bạn phải dùng CSS thuần hoặc kết hợp thư viện ngoài. Một số cách phổ biến:
- Dùng CSS thuần (áp dụng trên Firefox):
<style>
.custom-scroll {
scrollbar-color: #0d6efd #f1f1f1;
scrollbar-width: thin;
}
</style>- Dùng CSS với WebKit (Chrome, Safari, Edge Chromium):
<style>
.custom-scroll::-webkit-scrollbar {
width: 8px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #0d6efd;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
</style>Làm sao thêm scrollbar dọc cho một div trong Bootstrap?
Bạn có thể kết hợp class overflow với giới hạn chiều cao (max-height hoặc height). Ví dụ:
<div class="border overflow-auto" style="max-height: 200px;">
<p>Dòng 1...</p>
<p>Dòng 2...</p>
<p>Dòng 3...</p>
<p>Dòng 4...</p>
<p>Dòng 5...</p>
</div>Có thể ẩn scrollbar nhưng vẫn cuộn được không?
Trong CSS bạn có thể ẩn hiển thị scrollbar nhưng vẫn cho phép cuộn. Tuy nhiên, Bootstrap không cung cấp sẵn class này, bạn phải tự viết CSS. Ví dụ sử dụng WebKit CSS (Chrome, Safari, Edge Chromium):
<div class="hide-scrollbar" style="max-height: 150px;">
<p>Nội dung dài...</p>
<p>Nội dung dài...</p>
<p>Nội dung dài...</p>
</div>
<style>
.hide-scrollbar {
overflow-y: scroll; /* vẫn cho phép cuộn dọc */
scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
display: none; /* ẩn trên Chrome/Safari */
}
</style>Người dùng vẫn có thể cuộn bằng chuột hoặc cảm ứng, nhưng không nhìn thấy thanh cuộn. Đây là kỹ thuật hay dùng cho các thanh trượt tùy biến (custom UI).
Tổng kết
Scrollbar trong Bootstrap không phải là một component riêng mà được kiểm soát thông qua hệ thống class overflow tiện ích và sự kết hợp với CSS. Nhờ đó, bạn có thể dễ dàng xử lý các tình huống nội dung tràn trong modal, offcanvas, dropdown hay bảng dữ liệu mà vẫn giữ giao diện gọn gàng, thân thiện và chuyên nghiệp. Với những lưu ý và ví dụ thực tế trong bài viết này, ITviec hy vọng bạn đã nắm được cách sử dụng scrollbar trong Bootstrap để áp dụng hiệu quả vào dự án web của mình.
