Bài 27: Scrollspy trong Bootstrap 5

Chí Vỹ

Scrollspy là hiệu ứng hiển thị từng nội dung khi cuộn chuột. Và bạn có thể tạo Scrollspy dễ dàng trong Bootstrap 5.

Cách tạo Scrollspy trong Bootstrap

Scrollspy thường được dùng để cập nhật các liên kết tự động trong một danh sách điều hướng dựa trên vị trí cuộn chuột. Bạn có thể dựa theo code mẫu sau để tạo scrollspy trong Bootstrap 5.

<!-- The scrollable area -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>

<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

Giải thích chi tiết:

Thêm data-bs-spy="scroll" vào nhân tố được sử dụng làm vùng có thể cuộn chuột (thường là nhân tố <body>),

Thêm thuộc tính data-bs-target với một giá trị của id hoặc tên class của thanh điều hướng (.navbar). Điều này đảm bảo thanh điều hướng đó được kết nối với vùng có thể cuộn chuột.

Lưu ý rằng những nhân tố có thể cuộn phải khớp với ID của các liên kết ở từng mục trong danh sách trên thanh điều hướng (<div id="section1"> khớp <a href="#section1">).

Thuộc tính data-bs-offset tùy chọn xác định số pixel bù trừ từ trên xuống khi tính toán vị trí cuộn chuột. Điều này hữu ích khi bạn thấy các liên kết bên trong thanh điều hướng thay đổi trạng thái hoạt động quá sớm lúc đang chuyển sang những phần tử có thể cuộn. Mặc định là 10 pixel.

Yêu cầu vị trí tương đối: Phần tử có data-bs-spy="scroll" cần thuộc tính CSS position, với giá trị "tương đối" để hoạt động bình thường.

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  body {
      position: relative; 
  }
  </style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Phần 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Phần 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Phần 3</a>
      </li>
    </ul>
  </div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
  <h1>Phần 1</h1>
  <p>Giới thiệu về Quantrimang.com
Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...</p>
  <p>Chúng tôi mong muốn các thành viên của mình luôn nắm bắt được những thông tin, kiến thức, xu hướng công nghệ mới nhất, cũng như gỡ rối những vấn đề công nghệ các thành viên gặp phải khi sử dụng máy tính, điện thoại, các thiết bị điện tử thông dụng khác.
</p>
</div>

<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
  <h1>Phần 2</h1>
  <p>Các bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email  hoặc đăng ký tài khoản và đăng bài trực tiếp trên Quantrimang.com.</p>
  <p>Các bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email  hoặc đăng ký tài khoản và đăng bài trực tiếp trên Quantrimang.com.</p>
</div>

<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
  <h1>Phần 3</h1>
  <p>Mạng xã hội Quantrimang.com các chủ đề công nghệ, khoa học và cuộc sống, được phát triển và cung cấp bởi Công ty Cổ phần Mạng trực tuyến META.</p>
</div>

</body>
</html>

Bạn sẽ nhận được kết quả như hình bên dưới. Chú ý tới cuộn chuột và nhìn vào thanh menu điều hướng khi cuộn chuột để thấy rõ sự thay đổi

Tạo Scrollspy bằng Bootstrap 5