Bootstrap 5 cuộn văn bản
cuộn giấy
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 .
Cách tạo một cuộn cuộn
Ví dụ sau đây cho thấy cách tạo một cuộn cuộn:
Ví dụ
<!-- The scrollable area -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-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><a href="#section1">Section 1</a></li>
...
</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ử »Ví dụ giải thích
Thêm data-bs-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-bs-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-bs-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-bs-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.