Bootstrap 滚动监听参考

  • 通过 data-* 属性启用

    data-toggle="scroll" 添加到应该用作可滚动区域的元素(通常是<body>元素)。
    然后,为数据目标属性添加ID的值或导航栏(.navbar)的类名。 这是为了确保导航栏与可滚动区域连接。
    请注意,可滚动元素必须与导航栏列表项内的链接的ID匹配(<div id="section1"> 与 <a href="#section1">匹配)。
    可选的 data-offset 属性指定在计算滚动位置时要从顶部偏移的像素数;当您觉得导航栏内的链接在跳转到可滚动元素时过早或过早更改活动状态时,此功能很有用;默认值为 10px。
    // 可滚动区域
    <body data-spy="scroll" data-target=".navbar" data-offset="50">
    // 导航栏-<a>元素用于跳转到可滚动区域中的某个部分
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        ...
        <ul class="navbar-nav">
          <li><a href="#section1">Section 1</a></li>
        ...
    </nav>
    
    // Section 1 
    <div id="section1">
        <h1>Section 1</h1>
        <p>尝试滚动此页面,并在滚动时查看导航栏!</p>
    </div>
    ...
    </body>  
    
    尝试一下
  • 滚动式选项

    可以通过数据属性或 JavaScript 传递选项;对于数据属性,将选项名称附加到 data-,如 data-offset="" 所示。
    参数 类型 默认值 描述 示例
    offset 数字 10 指定计算滚动位置时从顶部偏移的像素数 尝试一下
  • 滚动式方法

    下表列出了所有可用的滚动式方法。
    方法 描述
    .scrollspy("refresh") 在scrollspy中添加和删除元素时,此方法可用于刷新文档
    .scrollspy("dispose") 摧毁scrollspy
  • 滚动式事件

    下表列出了所有可用的滚动式事件。
    事件 描述
    activate.bs.scrollspy 在滚动激活新item项时发生