Scrollspy（滚动监听） - [ Bootstrap 4 中文开发手册 ] - 在线原生手册

目录搜索

Getting started Accessibility（无障碍） Browsers and devices（浏览器和设备） Build tools（构建工具） Contents（内容） Download（下载） JavaScript Theming Bootstrap（主题Bootstrap） Webpack Components: Alerts Alerts（警报） Components: Badges Badges（徽章） Components: Breadcrumb Breadcrumb Components: Button group Button group（按钮组） Components: Buttons Buttons（按钮） Components: Cards Components: Carousel Cards（卡） Carousel（圆盘传送带） Components: Collapse Collapse（折叠） Components: Dropdowns Dropdowns（下拉菜单） Components: Forms Forms（表单） Components: Input group Input group（输入群组） Components: Input group Jumbotron（广告大屏幕） Components: List group List group（列表组） Components: Modal Modal（互动视窗） Components: Navbar Navbar（导航栏） Components: Navs Navs（导航栏） Components: Pagination Pagination（分页） Components: Popovers Popovers（弹出框） Components: Progress Progress（进度条） Components: Scrollspy Scrollspy（滚动监听） Components: Tooltips Tooltips（提示工具） Content Code（代码） Figures（图片区） Images（图片） Reboot（重置） Tables（表格） Typography（排版） Layout Grid（网格） Layout（布局） Media object（多媒体对象） Utilities for layout（排版通用类别） Migration Migrating to v4（迁移到v4） Utilities Borders（边框） Clearfix（清除浮动） Close icon（关闭图标） Colors（颜色） Display property（显示属性） Embeds（内嵌） Flex（弹性） Float（浮动） Image replacement（图像替换） Position（位置） Screenreaders（荧幕阅读器） Sizing（尺寸） Spacing（间隔） Text（文本） Vertical alignment（垂直对齐） Visibility（能见度）

文字

根据滚动位置自动更新引导导航或列表组组件，以指示当前视图端口中哪个链接处于活动状态。

它是如何工作的

滚动间谍有几个要求才能正常工作：

如果从源头构建我们的JS，要求util.js...

它必须用在一个引导带上NAV组分或列表组...

卷轴间谍需要position: relative;在你监视的元素上，通常<body>...

当监视其他元素时<body>，一定要有一个height设置和overflow-y: scroll;申请。

锚定物%28<a>%29是必需的，必须指向具有id...

成功实现后，您的导航或列表组将相应更新，移动.active根据它们关联的目标从一个项初始化到另一个项。

肚脐中的例子

滚动导航栏下面的区域，并观察活动类的变化。下拉式项目也将突出显示。

<nav id="navbar-example2" class="navbar navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar</a>  <ul class="nav nav-pills">    <li class="nav-item">      <a class="nav-link" href="#fat">@fat</a>    </li>    <li class="nav-item">      <a class="nav-link" href="#mdo">@mdo</a>    </li>    <li class="nav-item dropdown">      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>      <div class="dropdown-menu">        <a class="dropdown-item" href="#one">one</a>        <a class="dropdown-item" href="#two">two</a>        <div role="separator" class="dropdown-divider"></div>        <a class="dropdown-item" href="#three">three</a>      </div>    </li>  </ul></nav><div data-spy="scroll" data-target="#navbar-example2" data-offset="0">  <h4 id="fat">@fat</h4>  <p>...</p>  <h4 id="mdo">@mdo</h4>  <p>...</p>  <h4 id="one">one</h4>  <p>...</p>  <h4 id="two">two</h4>  <p>...</p>  <h4 id="three">three</h4>  <p>...</p></div>

嵌套NAV示例

涡旋间谍也适用于嵌套的.nav如果嵌套.nav是.active，它的父母也会.active滚动导航栏旁边的区域，并观察活动类的变化。

<nav id="navbar-example3" class="navbar navbar-light bg-light">  <a class="navbar-brand" href="#">Navbar</a>  <nav class="nav nav-pills flex-column">    <a class="nav-link" href="#item-1">Item 1</a>    <nav class="nav nav-pills flex-column">      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>    </nav>    <a class="nav-link" href="#item-2">Item2</a>    <a class="nav-link" href="#item-3">Item3</a>    <nav class="nav nav-pills flex-column">      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>    </nav>  </nav></nav><div data-spy="scroll" data-target="#navbar-example3" data-offset="0">  <h4 id="item-1">Item 1</h4>  <p>...</p>  <h5 id="item-1-1">Item 1-1</h5>  <p>...</p>  <h5 id="item-1-2">Item 2-2</h5>  <p>...</p>  <h4 id="item-2">Item 2</h4>  <p>...</p>  <h4 id="item-3">Item 3</h4>  <p>...</p>  <h5 id="item-3-1">Item 3-1</h5>  <p>...</p>  <h5 id="item-3-2">Item 3-2</h5>  <p>...</p></div>

使用列表组的示例

斯克鲁尔间谍也与.list-group滚动列表组旁边的区域，并观察活动类的更改。

<div id="list-example" class="list-group">  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>  <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a></div><div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">  <h4 id="list-item-1">Item 1</h4>  <p>...</p>  <h4 id="list-item-2">Item 2</h4>  <p>...</p>  <h4 id="list-item-3">Item 3</h4>  <p>...</p>  <h4 id="list-item-4">Item 4</h4>  <p>...</p></div>

使用

通过数据属性

若要轻松地将滚动间谍行为添加到顶部导航中，请添加data-spy="scroll"对于要监视%28的元素，最典型的情况是<body>29%。然后添加data-target属性，该属性具有任何Bootstrap的父元素的ID或类。.nav组件。

body {
  position: relative;}

<body data-spy="scroll" data-target="#navbar-example">  ...  <div id="navbar-example">    <ul class="nav nav-tabs" role="tablist">      ...    </ul>  </div>  ...</body>

通过JavaScript

加后position: relative;在CSS中，通过JavaScript调用滚动间谍：

$('body').scrollspy({ target: '#navbar-example' })

所需可解析ID目标

Navbar链接必须有可分辨的id目标。例如，<a href="#home">home</a>必须对应于DOM中的某些内容，如<div id="home"></div>...

非-`:visible`忽略目标元素

不是的目标元素:visible根据jQuery将被忽略，其相应的导航项将永远不会突出显示。

方法

`.scrollspy('refresh')`

当结合使用滚动间谍从DOM中添加或删除元素时，您需要调用以下刷新方法：

$('[data-spy="scroll"]').each(function () {  var $spy = $(this).scrollspy('refresh')})

`.scrollspy('dispose')`

破坏元素的滚动间谍。

备选方案

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名追加到data-，如data-offset=""...

Name	Type	Default	Description
offset	number	10	Pixels to offset from top when calculating position of scroll.

事件

Event Type	Description
activate.bs.scrollspy	This event fires on the scroll element whenever a new item becomes activated by the scrollspy.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {  // do something…})

 © 2011–2017 Twitter, Inc.

根据麻省理工学院的许可授权的代码。

根据CreativeCommonsAttributionLicense v3.0授权的文档。