Bootstrap4 滚动监听学习笔记

Bootstrap4 是一个流行的前端框架，提供了丰富的组件和样式，节省了开发者的时间。其中，滚动监听被广泛运用于导航栏、页面锚点等场景，本文将介绍 Bootstrap4 中的滚动监听方法及实例。

滚动监听方法

Bootstrap4 中通过 scrollspy 实现滚动监听。具体使用如下：

1. 在需要监听滚动的容器上添加 data-spy="scroll" 属性。
2. 在需要监听的导航栏上添加 data-target="#id" 属性（id 为需要监听容器的 id）。
3. 在导航栏上定义需要监听的标签（如 <a> 标签），并设置 href="#id" 属性（id 为需要监听容器内某个元素的 id）。

示例代码如下：

htmlCopy Code
<div class="container" data-spy="scroll" data-target="#navbarExample">
    <h1 id="section1">Section 1</h1>
    <p>Content of section 1</p>
    <h1 id="section2">Section 2</h1>
    <p>Content of section 2</p>
    <h1 id="section3">Section 3</h1>
    <p>Content of section 3</p>
    <h1 id="section4">Section 4</h1>
    <p>Content of section 4</p>
</div>

<nav id="navbarExample">
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
    </ul>
</nav>

实例

使用 Bootstrap4 滚动监听，可以实现平滑的页面跳转效果。示例代码如下：

htmlCopy Code
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" data-spy="scroll" data-target="#navbarNav">
    <div class="container">
        <a class="navbar-brand" href="#">Scrollspy Example</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#section1">Section 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section2">Section 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#section3">Section 3</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div id="section1" class="mt-5">
        <h2>Section 1</h2>
        <p>Content of section 1</p>
    </div>
    <div id="section2" class="mt-5">
        <h2>Section 2</h2>
        <p>Content of section 2</p>
    </div>
    <div id="section3" class="mt-5">
        <h2>Section 3</h2>
        <p>Content of section 3</p>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

以上代码会生成一个带有导航栏的页面，在点击导航栏链接时，会平滑地跳转到对应的页面区域。