Bootstrap 滚动监听

在本教程中，您将学习如何使用 Bootstrap 创建 scrollspy。

使用 Bootstrap 创建滚动监听

Bootstrap scrollspy 是一种导航机制，可根据滚动位置自动突出显示导航链接，以指示访问者当前在页面上的位置。

如果您使用书签链接将访问者Bootstrap到具有大量内容的页面的不同部分，则 scrollspy 将使您的网页更加优雅和易于访问。

Scrollspy 有以下要求才能正常运行：

它必须在 Bootstrap 导航，或列表组组件上使用。
您必须将样式 position: relative; 应用于您正在监视的元素，通常是 <body> 元素。但是，如果您要监视 <div> 或 <body> 以外的任何元素，请务必在其上另外应用 height 和 overflow-y: scroll;。
锚 (<a>) 是必需的，并且必须指向具有该 id 的元素。

这是一个使用列表组的滚动间谍示例。让我们尝试一下，看看它是如何工作的：

示例

Try this code »

<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>

通过数据属性创建滚动监听

您可以通过数据属性轻松地将滚动监视行为添加到导航栏，而无需编写任何 JavaScript 代码。让我们试试下面的例子，看看它是如何工作的：

示例

Try this code »

<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>

您可能想知道这段代码是关于什么的。好吧，让我们一一浏览这个 scrollspy 示例代码的每个部分，以便更好地理解。

代码说明

Bootstrap scrollspy 基本上有两个组件 — 目标（例如导航或列表组）和要监视的可滚动区域，通常是 <body> 部分。

data-bs-spy="scroll" 属性（line no-01）应用于您要监视的元素，在我们的例子中就是 <body> 元素。
data-bs-target 属性被添加到我们正在监视的元素（即 <body> 元素）中，并带有任何 Bootstrap .nav 组件的父元素的 ID 或类，以便导航链接可以被scrollspy瞄准以突出显示。
可选的 data-bs-offset 属性指定计算滚动位置时从顶部偏移的像素数。如果目标链接过早或过晚突出显示，请调整偏移值。默认值为 10 像素。

其余部分是不言自明的，例如 .navbar 元素指定 Bootstrap导航栏，而元素 <a href="#section1">Section 1</a>（line no-7）创建书签链接，.dropdown 元素（line no-15 ) 创建一个下拉菜单，依此类推。

通过 JavaScript 创建滚动监听

您也可以使用 JavaScript 手动添加 scrollspy — 只需在 JavaScript 代码中使用导航栏的 id 或 class 选择器调用 scrollspy() Bootstrap 方法。

示例

jQuery JavaScript

Try this code »

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

<script>
document.addEventListener("DOMContentLoaded", function(){
    var myScrollSpy = new bootstrap.ScrollSpy(document.body, {
        target: "#myNavbar"
    })
});
</script>

选项

有些选项可以传递给 scrollspy() Bootstrap 方法来自定义 scrollspy 的功能。选项可以通过数据属性或 JavaScript 传递。

要通过数据属性设置 scrollspy 选项，只需将选项名称附加到 data-bs-，如 data-bs-offset="0", data-bs-method="position" 等。

名称	类型	默认值	说明
offset	number	10	计算滚动位置时从顶部偏移的像素数。
method	string	auto	查找被窥探的元素所在的部分。值 `auto` 将选择获取滚动坐标的最佳方法。而 `offset` 值将使用 jQuery 偏移方法获取滚动坐标，而 `position` 值将使用 jQuery 位置方法获取滚动坐标。
target	string \| jQuery object \| DOM element		指定要应用 Scrollspy 插件的元素。

方法

这些是标准 bootstrap 的 scrollspy 方法：

传递选项

您还可以使用选项对象将选项传递给滚动间谍。

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

示例

jQuery JavaScript

Try this code »

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

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

refresh

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

示例

jQuery JavaScript

Try this code »

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

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

dispose

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

示例

jQuery JavaScript

Try this code »

<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>

<script>
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, …}
    });
});
</script>

getInstance

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

示例

jQuery JavaScript

Try this code »

<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>

<script>
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), …}
    });
});
</script>

getOrCreateInstance

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

示例

jQuery JavaScript

Try this code »

<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>

<script>
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), …}
    });
});
</script>

Events

Bootstrap 的 scrollspy 类包含一些用于挂钩 scrollspy 功能的事件。

事件	说明
activate.bs.scrollspy	只要有新项目被滚动监听激活，就会触发此事件。

以下示例在滚动监听突出显示新项目时显示警告消息。让我们尝试一下，看看它是如何工作的。

示例

jQuery JavaScript

Try this code »

<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>

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

Bootstrap 滚动监听

使用 Bootstrap 创建滚动监听

示例

通过数据属性创建滚动监听

示例

代码说明

通过 JavaScript 创建滚动监听

示例

选项

方法

传递选项

示例

refresh

示例

dispose

示例

getInstance

示例

getOrCreateInstance

示例

Events

示例

关于我们

联系方式

互动工具