Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Tạo ScrollSpy bằng Bootstrap

Bootstrap scrollspy là một cơ chế điều hướng tự động đánh dấu các liên kết điều hướng dựa trên vị trí cuộn để cho biết khách truy cập hiện họ đang ở đâu trên trang.

Scrollspy sẽ làm cho trang web của bạn trở nên thanh lịch và dễ truy cập hơn, nếu bạn đang sử dụng các liên kết đánh dấu trang để hướng khách truy cập đến các phần khác nhau của trang có một lượng lớn nội dung.

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

  • Nó phải được sử dụng trên Bootstrap Nav hoặc thành phần nhóm danh sách.
  • Bạn phải áp dụng kiểu position: relative; trên phần tử mà bạn đang theo dõi, thường là phần tử <body>. Tuy nhiên, nếu bạn đang theo dõi một phần tử <div> hoặc bất kỳ phần tử nào ngoài phần tử <body> hãy chắc chắn áp dụng thêm thuộc tính heightoverflow-y: scroll; trên đó.
  • Liên kết (<a>) là bắt buộc và phải trỏ đến một phần tử với id.

Đây là một ví dụ về một scrollspy bằng cách sử dụng nhóm danh sách. Hãy dùng thử và xem nó hoạt động như thế nào:

<body data-bs-spy="scroll" data-bs-offset="15" data-bs-target="#myScrollspy">
    <div class="container">
        <div class="row">
            <div class="col-sm-3" id="myScrollspy">
                <div class="list-group">
                    <a class="list-group-item list-group-item-action active" href="#section1">Section One</a>
                    <a class="list-group-item list-group-item-action" href="#section2">Section Two</a>
                    <a class="list-group-item list-group-item-action" href="#section3">Section Three</a>
                </div>
            </div>
            <div class="col-sm-9">
                <div id="section1">
                    <h2>Section One</h2>
                    <p>This is section one content...</p>
                </div>
                <hr>
                <div id="section2">
                    <h2>Section Two</h2>
                    <p>This is section two content...</p>
                </div>
                <hr>
                <div id="section3">
                    <h2>Section Three</h2>
                    <p>This is section three content...</p>
                </div>
            </div>
        </div>
    </div>
</body>

Tạo ScrollSpy thông qua thuộc tính data

Bạn có thể dễ dàng thêm hành vi scrollspy vào thanh điều hướng của mình thông qua thuộc tính data mà không cần viết một dòng mã JavaScript. Hãy thử ví dụ sau để xem nó hoạt động như thế nào:

<body data-bs-spy="scroll" data-bs-offset="60" data-bs-target="#myNavbar">
    <nav id="myNavbar" class="navbar navbar-light bg-light fixed-top">
        <div class="container-fluid">
            <a href="#" class="navbar-brand">Navbar</a>
            <ul class="nav nav-pills">
                <li class="nav-item">
                    <a href="#section1" class="nav-link">Section 1</a>
                </li>
                <li class="nav-item">
                    <a href="#section2" class="nav-link">Section 2</a>
                </li>
                <li class="nav-item">
                    <a href="#section3" class="nav-link">Section 3</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Section 4</a>
                    <div class="dropdown-menu">
                        <a href="#section4dot1" class="dropdown-item">Section 4.1</a>
                        <a href="#section4dot2" class="dropdown-item">Section 4.2</a>
                        <a href="#section4dot3" class="dropdown-item">Section 4.3</a>
                    </div>
                </li>
                <li>
                    <a href="#section5" class="nav-link">Section 5</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container">
        <div id="section1">
            <h2>Section 1</h2>
            <p>This is section 1 content...</p>
        </div>
        <hr>
        <div id="section2">
            <h2>Section 2</h2>
            <p>This is section 2 content...</p>
        </div>
        <hr>
        <div id="section3">
            <h2>Section 3</h2>
            <p>This is section 3 content...</p>
        </div>
        <hr>
        <h2>Section 4</h2>
        <p>This is section 4 content</p>
        <div id="section4dot1">
            <h3>Section 4.1</h3>
            <p>This is section 4.1 content...</p>
        </div>
        <div id="section4dot2">
            <h3>Section 4.2</h3>
            <p>This is section 4.2 content...</p>
        </div>
        <div id="section4dot3">
            <h3>Section 4.3</h3>
            <p>This is section 4.3 content...</p>
        </div>
        <hr>
        <div id="section5">
            <h2>Section 5</h2>
            <p>This is section 5 content...</p>
        </div>
    </div>
</body>

Bạn có thể tự hỏi mã này là gì. Chà, chúng ta hãy lần lượt xem qua từng phần của mã ví dụ scrollspy này để hiểu rõ hơn.

Giải thích mã

Bootstrap scrollspy về cơ bản có hai thành phần: đích (ví dụ: nav hoặc nhóm danh sách) và vùng có thể cuộn để theo dõi, thường là phần <body>.

  • Thuộc tính data-bs-spy="scroll" (dòng số 1) được áp dụng cho phần tử bạn muốn theo dõi, đơn giản là phần tử <body> trong trường hợp của chúng tôi.
  • Thuộc tính data-bs-target được thêm vào phần tử mà chúng tôi đang theo dõi (tức là phần tử <body>) với ID hoặc lớp của phần tử mẹ của bất kỳ thành phần Bootstrap .nav nào, để các liên kết điều hướng có thể được nhắm mục tiêu bởi scrollspy nhằm mục đích làm nổi bật.
  • Thuộc tính tùy chọn data-bs-offset chỉ định số lượng pixel cần bù từ trên cùng khi tính toán vị trí của cuộn. Điều chỉnh giá trị bù đắp nếu các liên kết được nhắm mục tiêu làm nổi bật quá sớm hoặc quá muộn. Giá trị mặc định là 10 pixel.

Phần còn lại của vấn đề là tự giải thích, chẳng hạn như phần tử .navbar chỉ định thanh điều hướng Bootstrap, trong khi phần tử <a href="#section1">Section 1</a> (dòng số 7) tạo liên kết đánh dấu, phần tử .dropdown (dòng số 15) tạo menu thả xuống, v.v.

Tạo ScrollSpy qua JavaScript

Bạn cũng có thể thêm scrollspy theo cách thủ công bằng JavaScript - chỉ cần gọi phương thức scrollspy() của Bootstrap với bộ chọn id hoặc class của thanh điều hướng trong mã JavaScript của bạn.

<script>
$(document).ready(function(){
    $("body").scrollspy({
        target: "#myNavbar"
    }) 
});
</script>

Các tùy chọn của Bootstrap ScrollSpy

Có một số tùy chọn nhất định có thể truyền cho phương thức scrollspy() của Bootstrap để tùy chỉnh chức năng của ScrollSpy. Các tùy chọn có thể được truyền qua các thuộc tính data hoặc JavaScript.

Để thiết lập các tùy chọn cho ScrollSpy thông qua các thuộc tính data, chỉ cần thêm tên tùy chọn vào data-bs-, chẳng hạn như data-bs-offset="0", data-bs-method="position", v.v.

Tên Kiểu Mặc định Mô tả
offset number 10 Số pixel cần bù từ trên cùng khi tính toán vị trí của cuộn.
method string auto

Giá trị auto sẽ chọn phương pháp tốt nhất để lấy tọa độ cuộn.

Trong khi, giá trị offset sẽ sử dụng phương thức jQuery offset để lấy tọa độ cuộn và giá trị position sẽ sử dụng phương thức jQuery position để lấy tọa độ cuộn.

target string |
jQuery object |
DOM element
Chỉ định phần tử để áp dụng plugin Scrollspy.

Các phương thức của Bootstrap ScrollSpy

Đây là các phương thức scrollspy tiêu chuẩn của bootstrap:

Cách truyền các tùy chọn vào Bootstrap ScrollSpy

Bạn có thể chuyển các tùy chọn vào ScrollSpy bằng cách sử dụng đối tượng options.

Ví dụ sau sẽ đặt độ lệch từ trên xuống khi tính toán vị trí cuộn.

<script>
$(document).ready(function(){
    $("body").scrollspy({
        offset: 70
    }) 
});
</script>

refresh

Bạn sẽ cần gọi phương thức này khi bạn đang 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. Hãy thử một ví dụ và xem nó thực sự hoạt động như thế nào:

<script>
$(document).ready(function(){
    $('[data-spy="scroll"]').each(function(){
        $(this).scrollspy("refresh");
    }); 
});
</script>

dispose

Phương thức này hủy scrollspy của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myScrollspy = bootstrap.ScrollSpy.getInstance($("#myContent")[0]);
        console.log(myScrollspy);
        // {_element: div#myContent, _scrollElement: div#myContent, _config: {…}, _selector: "#myNavbar .nav-link, #myNavbar .list-group-item, #myNavbar .dropdown-item", _offsets: Array(5), …}

        $("#myContent").scrollspy("dispose");
        console.log(myScrollspy);
        // {_element: null, _scrollElement: null, _config: null, _selector: null, _offsets: null, …}
    });
});
</script>

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của scrollspy được liên kết với một phần tử DOM.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myScrollspy = bootstrap.ScrollSpy.getInstance($("#myContent")[0]);
        console.log(myScrollspy);
        // {_element: div#myContent, _scrollElement: div#myContent, _config: {…}, _selector: "#myNavbar .nav-link, #myNavbar .list-group-item, #myNavbar .dropdown-item", _offsets: Array(5), …}
    });
});
</script>

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của scrollspy được liên kết với một phần tử DOM hoặc tạo một instance mới trong trường hợp scrollspy chưa được khởi tạo.

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        var myScrollspy = bootstrap.ScrollSpy.getOrCreateInstance($("#myContent")[0]);
        console.log(myScrollspy);
        // {_element: div#myContent, _scrollElement: div#myContent, _config: {…}, _selector: "#myNavbar .nav-link, #myNavbar .list-group-item, #myNavbar .dropdown-item", _offsets: Array(5), …}
    });
});
</script>

Các sự kiện của Bootstrap ScrollSpy

Lớp scrollspy của Bootstrap bao gồm một số sự kiện để kết nối vào chức năng scrollspy.

Sự kiện Mô tả
activate.bs.scrollspy Sự kiện này kích hoạt bất cứ khi nào một mục mới được kích hoạt bởi scrollspy.

Ví dụ sau đây hiển thị một thông báo cảnh báo khi một mục mới được đánh dấu bởi ScrollSpy. Chúng ta hãy thử nó và xem nó thực sự hoạt động như thế nào.

<script>
$(document).ready(function(){
    $("#myNavbar").on("activate.bs.scrollspy", function(){
        var currentItem = $(".nav li.active > a").text();
        $("#info").empty().html("Currently you are viewing - " + currentItem);
    })
});
</script>
BootstrapBootstrap Nâng Cao
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.

Bootstrap Button Bật Tắt
Trung Nguyen 05/04/2022
Bootstrap Button Bật Tắt

Trong hướng dẫn này, bạn sẽ học cách tạo các button bật tắt bằng Bootstrap.