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 .active
lớ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 height
bộ 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 .nav
s lồng nhau. Nếu một con .nav
được làm .active
tổ, 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-group
s. 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-target
thuộc tính với ID hoặc lớp của phần tử mẹ của bất kỳ .nav
thà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...
})