Bootstrap5 滚动监听（ScrollSpy）方法

这些是标准Bootstrap程序的滚动监听的方法

传递选项

您还可以使用 options 对象将选项传递给 scrollspy 方法。

以下示例将在计算滚动位置时设置与顶部的偏移量。

document.addEventListener("DOMContentLoaded", function(){
    var myScrollSpy = new bootstrap.ScrollSpy(document.body, {
        offset: 70
    })
});

尝试一下

refresh

当您将 scrollspy 与在 DOM 中添加或删除元素结合使用时，您需要调用此方法。 让我们看一个例子，看看它是如何工作的：

document.addEventListener("DOMContentLoaded", function(){
    var scrollspyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'));
    scrollspyList.forEach(function(element){
        bootstrap.ScrollSpy.getInstance(element).refresh();
    })
});

尝试一下

dispose

此方法会消除元素的 scrollspy（即删除 DOM 元素上存储的数据）。

document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myContent");

    btn.addEventListener("click", function(){
        var myScrollspy = bootstrap.ScrollSpy.getInstance(element);
        console.log(myScrollspy);
        // {_element: div#myContent, _scrollElement: div#myContent, _config: {…}, _selector: "#myNavbar .nav-link, #myNavbar .list-group-item, #myNavbar .dropdown-item", _offsets: Array(5), …}
        
        myScrollspy.dispose();
        console.log(myScrollspy);
        // {_element: null, _scrollElement: null, _config: null, _selector: null, _offsets: null, …}
    });

尝试一下

getInstance

这是一个静态方法，它允许我们获取与 DOM 元素关联的 scrollspy 实例。

document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myContent");

    btn.addEventListener("click", function(){
        var myScrollspy = bootstrap.ScrollSpy.getInstance(element);
        console.log(myScrollspy);
        // {_element: div#myContent, _scrollElement: div#myContent, _config: {…}, _selector: "#myNavbar .nav-link, #myNavbar .list-group-item, #myNavbar .dropdown-item", _offsets: Array(5), …}
    });
});

尝试一下

getOrCreateInstance

这是一种静态方法，它允许我们获取与 DOM 元素关联的 scrollspy 实例，或者在 scrollspy 未初始化的情况下创建一个新实例。

document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myContent");

    btn.addEventListener("click", function(){
        var myScrollspy = bootstrap.ScrollSpy.getOrCreateInstance(element);
        console.log(myScrollspy);
        // {_element: div#myContent, _scrollElement: div#myContent, _config: {…}, _selector: "#myNavbar .nav-link, #myNavbar .list-group-item, #myNavbar .dropdown-item", _offsets: Array(5), …}
    });
});

尝试一下