Chuyển đến nội dung chính Chuyển đến điều hướng tài liệu
in English

Scrollspy

Tự động cập nhật điều hướng Bootstrap hoặc các thành phần nhóm danh sách dựa trên vị trí cuộn để cho biết liên kết nào hiện đang hoạt động trong khung nhìn.

Làm thế nào nó hoạt động

Scrollspy có một số yêu cầu để hoạt động bình thường:

  • Nó phải được sử dụng trên một thành phần hoặc nhóm danh sách Bootstrap nav .
  • Scrollspy yêu cầu position: relative;phần tử bạn đang theo dõi, thường là <body>.
  • Anchors ( <a>) là bắt buộc và phải trỏ đến một phần tử cùng với đó id.

Khi được triển khai thành công, điều hướng hoặc nhóm danh sách của bạn sẽ cập nhật tương ứng, chuyển .activelớp từ mục này sang mục tiếp theo dựa trên các mục tiêu được liên kết của chúng.

Vùng chứa có thể cuộn và quyền truy cập bàn phím

Nếu bạn đang tạo một vùng chứa có thể cuộn (khác với <body>), hãy đảm bảo có một heightbộ và overflow-y: scroll;áp dụng cho nó — cùng với một tabindex="0"để đảm bảo quyền truy cập bàn phím.

Ví dụ trong thanh điều hướng

Cuộn khu vực bên dưới thanh điều hướng và xem thay đổi lớp đang hoạt động. Các mục thả xuống cũng sẽ được đánh dấu.

Tiêu đề đầu tiên

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Tiêu đề thứ hai

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Tiêu đề thứ ba

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Tiêu đề thứ tư

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Tiêu đề thứ năm

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

<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>

Ví dụ với điều hướng lồng nhau

Scrollspy cũng hoạt động với các .navs lồng nhau. Nếu một con .navđược làm .activetổ, bố mẹ của nó cũng sẽ như vậy .active. Cuộn khu vực bên cạnh thanh điều hướng và xem sự thay đổi lớp đang hoạt động.

Mục 1

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mục 1-1

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mục 1-2

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mặt hàng 2

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mặt hàng 3

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mục 3-1

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mục 3-2

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

<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>

Ví dụ với nhóm danh sách

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

Mục 1

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mặt hàng 2

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mặt hàng 3

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

Mặt hàng 4

Đây là một số nội dung giữ chỗ cho trang cuộn giấy. Lưu ý rằng khi bạn cuộn xuống trang, liên kết điều hướng thích hợp sẽ được tô sáng. Nó được lặp lại trong suốt ví dụ thành phần. Chúng tôi tiếp tục thêm một số bản sao ví dụ khác ở đây để nhấn mạnh việc cuộn và làm nổi bật.

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

Cách sử dụng

Qua các thuộc tính dữ liệu

Để dễ dàng thêm hành vi cuộn tròn vào điều hướng thanh trên cùng của bạn, hãy thêm data-bs-spy="scroll"vào phần tử bạn muốn theo dõi (thông thường nhất sẽ là phần tử này <body>). Sau đó, thêm data-bs-targetthuộc tính với ID hoặc lớp của phần tử mẹ của bất kỳ .navthành phần 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>

Qua JavaScript

Sau khi thêm position: relative;CSS của bạn, hãy gọi scrollspy qua JavaScript:

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

Mục tiêu ID có thể phân giải bắt buộc

Các liên kết thanh điều hướng phải có các mục tiêu id có thể phân giải được. Ví dụ, một <a href="#home">home</a>phải tương ứng với một cái gì đó trong DOM như <div id="home"></div>.

Các phần tử mục tiêu không hiển thị bị bỏ qua

Các phần tử mục tiêu không hiển thị sẽ bị bỏ qua và các mục điều hướng tương ứng của chúng sẽ không bao giờ được đánh dấu.

Phương pháp

Làm tươi

Khi sử dụng scrollspy kết hợp với việc thêm hoặc xóa các phần tử khỏi DOM, bạn sẽ cần gọi phương thức làm mới như sau:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

vứt bỏ

Hủy bỏ cuộn giấy của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM)

getInstance

Phương thức static cho phép bạn lấy phiên bản scrollspy được liên kết với một phần tử DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Phương thức static cho phép bạn lấy phiên bản scrollspy được liên kết với một phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó chưa được khởi tạo

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-bs-, như trong data-bs-offset="".

Tên Loại hình Mặc định Sự mô tả
offset con số 10 Điểm ảnh để bù đắp từ trên cùng khi tính toán vị trí của cuộn.
method sợi dây auto Tìm phần tử do thám nằm trong phần nào. autoSẽ chọn phương pháp tốt nhất để lấy tọa độ cuộn. offsetsẽ sử dụng Element.getBoundingClientRect()phương thức để lấy tọa độ cuộn. positionsẽ sử dụng các thuộc tính HTMLElement.offsetTopHTMLElement.offsetLeftđể lấy tọa độ cuộn.
target chuỗi | đối tượng jQuery | Phần tử DOM Chỉ định phần tử để áp dụng plugin Scrollspy.

Sự kiện

Loại sự kiện Sự mô tả
activate.bs.scrollspy Sự kiện này kích hoạt trên phần tử cuộn bất cứ khi nào một mục mới được kích hoạt bởi phần tử cuộn.
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})