bootstrap5 滚动监听（scrollspy）方法——迹忆客-ag捕鱼王app官网

这些是标准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), …}
    });
});