Bootstrap JS Scrollspy
Cuộn cuộn JS
Scrollspy được sử dụng để tự động cập nhật các liên kết trong danh sách điều hướng dựa trên vị trí cuộn.
Để biết hướng dẫn về Scrollspy, hãy đọc Hướng dẫn về Bootstrap Scrollspy của chúng tôi.
Thông qua thuộc tính data-*
Thêm data-spy="scroll"
vào phần tử sẽ được sử dụng làm vùng có thể cuộn (thường đây là phần tử <body>
).
Sau đó thêm thuộc tính data-target
với giá trị id hoặc tên lớp của thanh điều hướng ( .navbar
). Điều này nhằm đảm bảo rằng thanh điều hướng được kết nối với vùng có thể cuộn.
Lưu ý rằng các phần tử có thể cuộn phải 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">
khớp với <a href="#section1">
).
Thuộc tính data-offset
tùy chọn chỉ định số pixel cần bù từ trên xuống khi tính toán vị trí cuộn. Điều này hữu ích khi bạn cảm 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 hoặc quá sớm khi chuyển sang các phần tử có thể cuộn. Mặc định là 10 pixel.
Yêu cầu định vị tương đối: Phần tử có data-spy="scroll" yêu cầu thuộc tính vị trí CSS, có giá trị "tương đối" để hoạt động bình thường.
Ví dụ
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-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 class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</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>
Hãy tự mình thử »Thông qua JavaScript
Kích hoạt thủ công với:
Tùy chọn cuộn
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với thuộc tính dữ liệu, hãy thêm tên tùy chọn vào data-, như trong data-offset="".
Name | Type | Default | Description | Try it |
---|---|---|---|---|
offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll | Try it |
Phương pháp cuộn
Bảng sau liệt kê tất cả các phương thức cuộn có sẵn.
Method | Description |
---|---|
.scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
.scrollspy("dispose") | Destroys the scrollspy |
Sự kiện Scrollspy
Bảng sau liệt kê tất cả các sự kiện cuộn có sẵn.
Event | Description |
---|---|
activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |