Bootstrap/docs/4.5/components/scrollspy
滚动式
根据滚动位置自动更新Bootstrap导航或列表组组件,以指示当前在视口中处于活动状态的链接。
这个怎么运作
Scrollspy有一些要求才能正常运行：
- 如果您是从源代码构建JavaScript, 要求
util.js. - 必须在引导程序上使用 导航组件 or 清单组 .
- Scrollspy需要
position: relative;在您监视的元素上,通常是<body>. - 侦查除
<body>,请确保有一个height设置和overflow-y: scroll;应用。 - 锚（
<a>）是必需的,并且必须指向具有该元素的元素id.
成功实施后,您的导航或列表组将相应地进行更新, .active 根据相关的目标从一个项目到下一个项目进行分类。
导航栏中的示例
滚动导航栏下方的区域,并查看活动的班级更改。 下拉项也会突出显示。
@fat
广告绑腿基塔尔,早午餐ID艺术派对dolor labe。 在干草叉卖完qui之前,干草叉和罐头都是低调的。 Tumblr从农场到餐桌的自行车使用任何权利。 Anim keffiyeh Carles开衫。 Velit seitan mcsweeney的摄影棚3 Wolf Moon Irure。 Cosby毛衣,您可能还没有听说过羊毛开衫信托基金culpa biodiesel wes anderson美学。 尼尔（Nihil）纹身了Accusamus,讽刺了生物柴油keffiyeh工匠ullamco的后果。
@mdo
Veniam Marfa小胡子滑板,贴布Fugiat Velit干草叉胡须。 Freegan胡子aliqua cupidatat mcsweeney的vero。 Cupidatat四个loko nisi,一个helvetica nulla carles。 刺青的cosby毛衣食品卡车,mcsweeney的quis非Freegan乙烯基。 Lo-fi wes Anderson +1服装。 卡尔非审美运动追求高级化。 布鲁克林精酿精酿啤酒副主演。
one
Occaecat commodo aliqua delectus。 Fap工艺啤酒Deserunt滑板EA。 Lomo自行车权利使Banh mi,velit ea和magna veniam的下一个locavore单一来源咖啡成为可能。 高寿命ID乙烯基,回声公园结果Quis Aliquip Banh Mi干草叉。 Vero VHS最佳专家。 Consectetur nisi DIY迷你斜挎包。 Cred ex,可持续的delectus consectetur腰包iPhone。
two
在incididunt回声公园中,officia deserunt mcsweeney偶然的主人清洗了雷猫sapiente veniam。 专家VHS优雅,偶然的Shoreditch +1生物柴油labumum精酿啤酒。 单产咖啡旅行者会诱使四个loko,cupidatat terry richardson大师清洗。 Assumenda,您可能还没有听说过他们的艺术派对腰包,有纹身的nulla开衫tempor广告。 偶然的狼内斯西恩特（Nesciunt）服装可持续发展。 Elit狼在波特兰（Lo-Fi EA Portland）变成了妖精,然后卖光了四个loko。 Locavore enim nostrud mlkshk brooklyn nesciunt。
三
广告绑腿基塔尔,早午餐ID艺术派对dolor labe。 在干草叉卖完qui之前,干草叉和罐头都是低调的。 Tumblr从农场到餐桌的自行车使用任何权利。 Anim keffiyeh Carles开衫。 Velit seitan mcsweeney的摄影棚3 Wolf Moon Irure。 Cosby毛衣,您可能还没有听说过羊毛开衫信托基金culpa biodiesel wes anderson美学。 尼尔（Nihil）纹身了Accusamus,讽刺了生物柴油keffiyeh工匠ullamco的后果。
Keytar twee博客,culpa信使包marfa等等delectus食品卡车。 Sapiente合成ID假定。 Locavore sed helvetica cliche具有讽刺意味的是,您可能从未听说过的雷猫会导致连帽衫无麸质lo-fi fap aliquip。 特里里查森（Terry Richardson）偶然的早午餐Nesciunt quis Cosby毛衣工匠,在工夫端庄的Placet卖光之前。 羊毛衫精酿啤酒seitan现成的天鹅绒。 VHS chambray labisis tempor veniam。 动画mollit minim commodo ullamco雷猫。
<nav class="navbar navbar-light bg-light" id="navbar-example2">
<a class="navbar-brand" href="#"> 导航栏 </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 aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"> 落下 </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one"> one </a>
<a class="dropdown-item" href="#two"> two </a>
<div class="dropdown-divider" role="separator"></div>
<a class="dropdown-item" href="#three"> 三 </a>
</div>
</li>
</ul>
</nav>
<div class="scrollspy-example" data-offset="0" data-spy="scroll" data-target="#navbar-example2">
<h4 id="fat"> @fat </h4>
<p> 广告绑腿基塔尔,早午餐ID艺术派对dolor labe。 在干草叉卖完qui之前,干草叉和罐头都是低调的。 Tumblr从农场到餐桌的自行车使用任何权利。 Anim keffiyeh Carles开衫。 Velit seitan mcsweeney的摄影棚3 Wolf Moon Irure。 Cosby毛衣,您可能还没有听说过羊毛开衫信托基金culpa biodiesel wes anderson美学。 尼尔（Nihil）纹身了Accusamus,讽刺了生物柴油keffiyeh工匠ullamco的后果。 </p>
<h4 id="mdo"> @mdo </h4>
<p> Veniam Marfa小胡子滑板,贴布Fugiat Velit干草叉胡须。 Freegan胡子aliqua cupidatat mcsweeney的vero。 Cupidatat四个loko nisi,一个helvetica nulla carles。 刺青的cosby毛衣食品卡车,mcsweeney的quis非Freegan乙烯基。 Lo-fi wes Anderson +1服装。 卡尔非审美运动追求高级化。 布鲁克林精酿精酿啤酒副主演。 </p>
<h4 id="one"> one </h4>
<p> Occaecat commodo aliqua delectus。 Fap工艺啤酒Deserunt滑板EA。 Lomo自行车权利使Banh mi,velit ea和magna veniam的下一个locavore单一来源咖啡成为可能。 高寿命ID乙烯基,回声公园结果Quis Aliquip Banh Mi干草叉。 Vero VHS最佳专家。 Consectetur nisi DIY迷你斜挎包。 Cred ex,可持续的delectus consectetur腰包iPhone。 </p>
<h4 id="two"> two </h4>
<p> 在incididunt回声公园中,officia deserunt mcsweeney偶然的主人清洗了雷猫sapiente veniam。 专家VHS优雅,偶然的Shoreditch +1生物柴油labumum精酿啤酒。 单产咖啡旅行者会诱使四个loko,cupidatat terry richardson大师清洗。 Assumenda,您可能还没有听说过他们的艺术派对腰包,有纹身的nulla开衫tempor广告。 偶然的狼内斯西恩特（Nesciunt）服装可持续发展。 Elit狼在波特兰（Lo-Fi EA Portland）变成了妖精,然后卖光了四个loko。 Locavore enim nostrud mlkshk brooklyn nesciunt。 </p>
<h4 id="three"> 三 </h4>
<p> 广告绑腿基塔尔,早午餐ID艺术派对dolor labe。 在干草叉卖完qui之前,干草叉和罐头都是低调的。 Tumblr从农场到餐桌的自行车使用任何权利。 Anim keffiyeh Carles开衫。 Velit seitan mcsweeney的摄影棚3 Wolf Moon Irure。 Cosby毛衣,您可能还没有听说过羊毛开衫信托基金culpa biodiesel wes anderson美学。 尼尔（Nihil）纹身了Accusamus,讽刺了生物柴油keffiyeh工匠ullamco的后果。 </p>
<p> Keytar twee博客,culpa信使包marfa等等delectus食品卡车。 Sapiente合成ID假定。 Locavore sed helvetica cliche具有讽刺意味的是,您可能从未听说过的雷猫会导致连帽衫无麸质lo-fi fap aliquip。 特里里查森（Terry Richardson）偶然的早午餐Nesciunt quis Cosby毛衣工匠,在工夫端庄的Placet卖光之前。 羊毛衫精酿啤酒seitan现成的天鹅绒。 VHS chambray labisis tempor veniam。 动画mollit minim commodo ullamco雷猫。 </p>
</div>嵌套导航的示例
Scrollspy也适用于嵌套 .nav s. 如果嵌套 .nav is .active ,其父母也将 .active 。滚动导航栏旁边的区域,并查看活动的班级更改。
第1项
前结果是科莫多人平易近人的运动,当然也有例外。 ipsum ipsum ipsum ullamco cillum consectetur ut和aute consectetur labour。 结果表明,临时工不胜任。 Qui Laborum do nonexcepteur nulla magna eiusmod consectetur in。 Alici et alquafifi quis quis et indicidunt变态的非动画表示贴花美元,继而废止mollit美元。 非合法的铜质商品普通铜质商品普通铜质商品
项目1-1
Amet tempol mollit aliquip pariatur commodo do ea cillum commodo Lorem et occaecat elit qui et。 Aliquip Labore曾在展览会上演过剧情,演绎了Lorem ullamco绝望。 Aliqua cillumexcepteur irure equis id quis ea。 坐在偶然的ullamco aute magna pariatur Nostrud Labore。 代表阿里奎普·科莫多·伊尤斯莫德·阿利基普·斯特·阿梅奎特·科特迪瓦·德·阿梅奎特·科特迪瓦·马科斯·科塞夫特·科马蒂斯·科莫托·科贾托·福贾特 Enim aliquip锻炼ullamco贴身的波动性例外者最小锻炼最小化commodo贴身运动 动手完成圣多美和西法动画。
项目1-2
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur labourum sunt enim。 Irure labis mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat。 Nulla ipsum cillum eiusmod sint elitexcepteur ea labour enim consectetur in labe anim。 偶然发生的意外情况。 非紧接着的eiusmod velit incididunt中的occaecat nulla动画。
第2项
Quis magna Lorem anim ipsum do mollit sit cillum volatet ex nulla tempor。 Laborum等同于非精英enim activ cillum aliqua等同于aliqua。 Esse ex consectetur mollittate est du du labusis adip ipsum anim Lorem。 Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt坐在enim elit aliqua esse irure。 劳动者在临时劳动者办公室中的劳动者非劳动者非居民或非商业性劳动者。 Ipsum fugiat事例发生后,ipsum comsumo tempor暂时脱落。
第3项
可以坐在沙发上,也可以坐在椅子上。 Nostrud aliqua ipsum fugiat miniproident occaecatexcepteur aliquip culpa aute tempor reprehenderit。 离开后的临时政府将继续进行联邦政府的债务保护。
项目3-1
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem偶然发现。 Ea id dolore动画演习fugiat labre劳动化身cillum do labis劳动。 最好的锻炼是对劳动者的重新诠释。 Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure。 Ullamco突发性劳动试验是在运动中进行的,在运动中应尽量减少运动。 估计临时工的劳动强度会降低劳动强度,而临时性的工业生产成本则会降低。
项目3-2
劳动者坐着commodo elit adipisicing坐着aliquip elit顺从volupt最小mollit nostrud aute reprehenderit做。 洛雷姆（Lorem）在运动中起伏着奇特的行为。 occaecat prosectetur nisi发生在occaecat偶然事件中,最小化执行运动的权限。 Aliquip会导致劳动者的劳动。 坐在威尼姆·库尔帕·阿利夸（Veniam culpa aliqua）的宫外临时女权主义者。
<div class="row">
<div class="col-4">
<nav class="navbar navbar-light bg-light flex-column" id="navbar-example3">
<a class="navbar-brand" href="#"> 导航栏 </a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1"> 第1项 </a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1"> 项目1-1 </a>
<a class="nav-link ml-3 my-1" href="#item-1-2"> 项目1-2 </a>
</nav>
<a class="nav-link" href="#item-2"> 第2项 </a>
<a class="nav-link" href="#item-3"> 第3项 </a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1"> 项目3-1 </a>
<a class="nav-link ml-3 my-1" href="#item-3-2"> 项目3-2 </a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div class="scrollspy-example-2" data-offset="0" data-spy="scroll" data-target="#navbar-example3">
<h4 id="item-1"> 第1项 </h4>
<p> 前结果是科莫多人平易近人的运动,当然也有例外。 ipsum ipsum ipsum ullamco cillum consectetur ut和aute consectetur labour。 结果表明,临时工不胜任。 Qui Laborum do nonexcepteur nulla magna eiusmod consectetur in。 Alici et alquafifi quis quis et indicidunt变态的非动画表示贴花美元,继而废止mollit美元。 非合法的铜质商品普通铜质商品普通铜质商品 </p>
<h5 id="item-1-1"> 项目1-1 </h5>
<p> Amet tempol mollit aliquip pariatur commodo do ea cillum commodo Lorem et occaecat elit qui et。 Aliquip Labore曾在展览会上演过剧情,演绎了Lorem ullamco绝望。 Aliqua cillumexcepteur irure equis id quis ea。 坐在偶然的ullamco aute magna pariatur Nostrud Labore。 代表阿里奎普·科莫多·伊尤斯莫德·阿利基普·斯特·阿梅奎特·科特迪瓦·德·阿梅奎特·科特迪瓦·马科斯·科塞夫特·科马蒂斯·科莫托·科贾托·福贾特 Enim aliquip锻炼ullamco贴身的波动性例外者最小锻炼最小化commodo贴身运动 动手完成圣多美和西法动画。 </p>
<h5 id="item-1-2"> 项目1-2 </h5>
<p> Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur labourum sunt enim。 Irure labis mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat。 Nulla ipsum cillum eiusmod sint elitexcepteur ea labour enim consectetur in labe anim。 偶然发生的意外情况。 非紧接着的eiusmod velit incididunt中的occaecat nulla动画。 </p>
<h4 id="item-2"> 第2项 </h4>
<p> Quis magna Lorem anim ipsum do mollit sit cillum volatet ex nulla tempor。 Laborum等同于非精英enim activ cillum aliqua等同于aliqua。 Esse ex consectetur mollittate est du du labusis adip ipsum anim Lorem。 Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt坐在enim elit aliqua esse irure。 劳动者在临时劳动者办公室中的劳动者非劳动者非居民或非商业性劳动者。 Ipsum fugiat事例发生后,ipsum comsumo tempor暂时脱落。 </p>
<h4 id="item-3"> 第3项 </h4>
<p> 可以坐在沙发上,也可以坐在椅子上。 Nostrud aliqua ipsum fugiat miniproident occaecatexcepteur aliquip culpa aute tempor reprehenderit。 离开后的临时政府将继续进行联邦政府的债务保护。 </p>
<h5 id="item-3-1"> 项目3-1 </h5>
<p> Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem偶然发现。 Ea id dolore动画演习fugiat labre劳动化身cillum do labis劳动。 最好的锻炼是对劳动者的重新诠释。 Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure。 Ullamco突发性劳动试验是在运动中进行的,在运动中应尽量减少运动。 估计临时工的劳动强度会降低劳动强度,而临时性的工业生产成本则会降低。 </p>
<h5 id="item-3-2"> 项目3-2 </h5>
<p> 劳动者坐着commodo elit adipisicing坐着aliquip elit顺从volupt最小mollit nostrud aute reprehenderit做。 洛雷姆（Lorem）在运动中起伏着奇特的行为。 occaecat prosectetur nisi发生在occaecat偶然事件中,最小化执行运动的权限。 Aliquip会导致劳动者的劳动。 坐在威尼姆·库尔帕·阿利夸（Veniam culpa aliqua）的宫外临时女权主义者。 </p>
</div>
</div>
</div>列表组示例
Scrollspy也适用于 .list-group s. 滚动列表组旁边的区域,并观察活动班级的变化。
第1项
前结果是科莫多人平易近人的运动,当然也有例外。 ipsum ipsum ipsum ullamco cillum consectetur ut和aute consectetur labour。 结果表明,临时工不胜任。 Qui Laborum do nonexcepteur nulla magna eiusmod consectetur in。 Alici et alquafifi quis quis et indicidunt变态的非动画表示贴花美元,继而废止mollit美元。 非合法的铜质商品普通铜质商品普通铜质商品
第2项
Quis magna Lorem anim ipsum do mollit sit cillum volatet ex nulla tempor。 Laborum等同于非精英enim activ cillum aliqua等同于aliqua。 Esse ex consectetur mollittate est du du labusis adip ipsum anim Lorem。 Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt坐在enim elit aliqua esse irure。 劳动者在临时劳动者办公室中的劳动者非劳动者非居民或非商业性劳动者。 Ipsum fugiat事例发生后,ipsum comsumo tempor暂时脱落。
第3项
可以坐在沙发上,也可以坐在椅子上。 Nostrud aliqua ipsum fugiat miniproident occaecatexcepteur aliquip culpa aute tempor reprehenderit。 离开后的临时政府将继续进行联邦政府的债务保护。
第4项
可以坐在沙发上,也可以坐在椅子上。 Nostrud aliqua ipsum fugiat miniproident occaecatexcepteur aliquip culpa aute tempor reprehenderit。 离开后的临时政府将继续进行联邦政府的债务保护。
<div class="row">
<div class="col-4">
<div class="list-group" id="list-example">
<a class="list-group-item list-group-item-action" href="#list-item-1"> 第1项 </a>
<a class="list-group-item list-group-item-action" href="#list-item-2"> 第2项 </a>
<a class="list-group-item list-group-item-action" href="#list-item-3"> 第3项 </a>
<a class="list-group-item list-group-item-action" href="#list-item-4"> 第4项 </a>
</div>
</div>
<div class="col-8">
<div class="scrollspy-example" data-offset="0" data-spy="scroll" data-target="#list-example">
<h4 id="list-item-1"> 第1项 </h4>
<p> 前结果是科莫多人平易近人的运动,当然也有例外。 ipsum ipsum ipsum ullamco cillum consectetur ut和aute consectetur labour。 结果表明,临时工不胜任。 Qui Laborum do nonexcepteur nulla magna eiusmod consectetur in。 Alici et alquafifi quis quis et indicidunt变态的非动画表示贴花美元,继而废止mollit美元。 非合法的铜质商品普通铜质商品普通铜质商品 </p>
<h4 id="list-item-2"> 第2项 </h4>
<p> Quis magna Lorem anim ipsum do mollit sit cillum volatet ex nulla tempor。 Laborum等同于非精英enim activ cillum aliqua等同于aliqua。 Esse ex consectetur mollittate est du du labusis adip ipsum anim Lorem。 Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt坐在enim elit aliqua esse irure。 劳动者在临时劳动者办公室中的劳动者非劳动者非居民或非商业性劳动者。 Ipsum fugiat事例发生后,ipsum comsumo tempor暂时脱落。 </p>
<h4 id="list-item-3"> 第3项 </h4>
<p> 可以坐在沙发上,也可以坐在椅子上。 Nostrud aliqua ipsum fugiat miniproident occaecatexcepteur aliquip culpa aute tempor reprehenderit。 离开后的临时政府将继续进行联邦政府的债务保护。 </p>
<h4 id="list-item-4"> 第4项 </h4>
<p> 可以坐在沙发上,也可以坐在椅子上。 Nostrud aliqua ipsum fugiat miniproident occaecatexcepteur aliquip culpa aute tempor reprehenderit。 离开后的临时政府将继续进行联邦政府的债务保护。 </p>
</div>
</div>
</div>用法
通过数据属性
要将滚动行为轻松添加到顶部导航,请添加 data-spy="scroll" 要监视的元素（通常是 <body> ). 然后添加 data-target 具有任何Bootstrap父元素的ID或类的属性 .nav 零件。
通过JavaScript
添加后 position: relative; 在CSS中,通过JavaScript调用scrollspy：
需要可解析的ID目标
导航栏链接必须具有可解析的ID目标。 例如,一个 <a href="#home">home</a> 必须与DOM中的某些内容相对应,例如 <div id="home"></div>.
方法
.scrollspy('refresh')
将scrollspy与DOM中的元素添加或删除结合使用时,您需要像这样调用refresh方法：
.scrollspy('dispose')
破坏元素的卷轴。
选项
可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到 data- ,如 data-offset="".
| Name | Type | 默认 | 描述 |
|---|---|---|---|
| 抵销 | 数 | 10 | 计算滚动位置时要从顶部偏移的像素。 |
| 方法 | 串 | auto | 查找间谍元素所在的部分。 auto 将选择最佳方法来获取滚动坐标。 offset 将使用jQuery offset方法获取滚动坐标。 position 将使用jQuery position方法获取滚动坐标。
|
| 目标 | DOM元素 | 指定要应用Scrollspy插件的元素。 |
活动
| 事件类型 | 描述 |
|---|---|
| activate.bs.scrollspy | 每当scrollspy激活了新项目时,都会在滚动元素上触发此事件。 |
