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.

Trên trang này

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.

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

Tiêu đề thứ ba

Tiêu đề thứ tư

Tiêu đề thứ năm

<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

Mục 1-1

Mục 1-2

Mặt hàng 2

Mặt hàng 3

Mục 3-1

Mục 3-2

<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 Mặt hàng 2 Mặt hàng 3 Mặt hàng 4

Mục 1

Mặt hàng 2

Mặt hàng 3

Mặt hàng 4

<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. `auto`Sẽ chọn phương pháp tốt nhất để lấy tọa độ cuộn. `offset`sẽ sử dụng `Element.getBoundingClientRect()`phương thức để lấy tọa độ cuộn. `position`sẽ sử dụng các thuộc tính `HTMLElement.offsetTop`và `HTMLElement.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...
})

Scrollspy

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

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

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

Tiêu đề đầu tiên

Tiêu đề thứ hai

Tiêu đề thứ ba

Tiêu đề thứ tư

Tiêu đề thứ năm

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

Mục 1

Mục 1-1

Mục 1-2

Mặt hàng 2

Mặt hàng 3

Mục 3-1

Mục 3-2

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

Mục 1

Mặt hàng 2

Mặt hàng 3

Mặt hàng 4

Cách sử dụng

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

Qua JavaScript

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

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

Phương pháp

Làm tươi

vứt bỏ

getInstance

getOrCreateInstance

Tùy chọn

Sự kiện