Scrollspy là một tính năng của Bootstrap 5, cho phép cập nhật tự động các liên kết trong một danh sách điều hướng dựa trên vị trí cuộn chuột. Ví dụ, khi bạn cuộn đến một phần nội dung nào đó trên trang web, liên kết tương ứng trong danh sách điều hướng sẽ được đánh dấu là hoạt động. Điều này giúp người dùng biết được họ đang ở đâu trên trang web và có thể chuyển đổi giữa các phần nội dung một cách dễ dàng.

1. Cách tạo Scrollspy trong Bootstrap 5

Để tạo Scrollspy trong Bootstrap 5, bạn cần làm theo các bước sau:

  • Thêm thuộc tính data-bs-spy="scroll" vào phần tử mà bạn muốn sử dụng làm khu vực cuộn chuột (thường là phần tử <body>).
  • Thêm thuộc tính data-bs-target với giá trị là id hoặc tên lớp của thanh điều hướng .navbar. Điều này để đảm bảo rằng thanh điều hướng được kết nối với khu vực cuộn chuột.
  • Lưu ý rằng các phần tử có thể cuộn phải trùng khớp với id của các liên kết bên trong các mục danh sách của thanh điều hướng (<div id="section1"> phù hợp với <a href="#section1">).
  • Thuộc tính data-bs-offset tùy chọn chỉ định số điểm ảnh để bù trừ từ đầu khi tính toán vị trí cuộn. Điều này hữu ích khi bạn cảm thấy rằng 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 hoặc quá muộn khi nhảy đến các phần tử có thể cuộn. Mặc định là 10 điểm ảnh.
  • Yêu cầu vị trí tương đối: Phần tử có data-bs-spy="scroll" yêu cầu thuộc tính CSS position, với giá trị là relative để hoạt động đúng
    >>>>> Xem thêm bài viết tương tự tại đây:
  • Các ký tự đặc biệt trong HTML và cách sử dụng
  • Tất tần tật về Container trong Bootstrap 5
  • Bootstrap là gì? Hướng dẫn cách sử dụng Bootstrap

2. Một vài ví dụ về Scrollspy trong Bootstrap 5

2.1. Ví dụ sử dụng Scrollspy trong Bootstrap 5 trong thanh navbar

Dưới đây là một ví dụ về cách tạo Scrollspy trong Bootstrap 5:

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

 

2.2. Ví dụ sử dụng Scrollspy trong Bootstrap 5 với nested nav

Scrollspy cũng hoạt động với các .nav lồng nhau. Nếu một .nav lồng nhau là .active, các phần tử cha của nó cũng sẽ là .active. Cuộn khu vực bên cạnh thanh điều hướng và quan sát lớp active thay đổi.

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

2.2. Ví dụ sử dụng Scrollspy trong Bootstrap 5 với list-group

Scrollspy cũng hoạt động với các .list-group. Cuộn khu vực bên cạnh nhóm danh sách và quan sát lớp active thay đổi.

<div id="scrollspy-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#scrollspy-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>Text 1</p>
  <h4 id="item-2">Item 2</h4>
  <p>Text 12p>
  <h4 id="item-3">Item 3</h4>
  <p>Text 3</p>
  <h4 id="item-4">Item 4</h4>
  <p>Text 4</p>
</div>

3. Sử dụng Scrollspy trong Bootstrap 5

3.1. Sử dụng Scrollspy trong Bootstrap 5 thông qua thuộc tính html

Để dễ dàng thêm hành vi scrollspy vào thanh điều hướng trên cùng của bạn, hãy thêm thuộc tính data-bs-spy=“scroll” vào phần tử mà bạn muốn theo dõi (thường là phần tử <body>). Sau đó, thêm thuộc tính data-bs-target với giá trị là ID hoặc tên lớp của phần tử cha của bất kỳ thành phần .nav của Bootstrap nào.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

3.2. Sử dụng Scrollspy trong Bootstrap 5 thông qua JavaScript

Sau khi thêm vị trí position: relative; trong CSS của bạn, ta có thể sử dụng scrollspy qua JavaScript như sau:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Kết luận

Scrollspy là một tính năng hữu ích của Bootstrap 5, giúp tăng trải nghiệm người dùng trên trang web của bạn. Bạn chỉ cần thêm một vài thuộc tính dữ liệu vào phần tử cuộn chuột và thanh điều hướng, và Bootstrap 5 sẽ làm phần còn lại cho bạn. Bạn có thể tham khảo thêm về Scrollspy tại trang chính thức của Bootstrap 5.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về Scrollspy trong Bootstrap 5 và có thể áp dụng nó vào dự án của mình. Cảm ơn bạn đã đọc!

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: 

Banner bottom