全面解析Bootstrap中scrollspy(滚动监听)的使用方法

 更新时间:2016年06月06日 08:46:54   作者:小龙女先生  
这篇文章主要为大家全面解析Bootstrap中scrollspy(滚动侦听)的使用方法,感兴趣的小伙伴们可以参考一下

bootstrap源码分析之scrollspy(滚动侦听)

源码文件:
Scrollspy.js

实现功能
1、当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项
2、导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey
3、菜单上必须有.nav样式
4、滚动区域的data-target与导航父级Id(一定是父级)要一致

<div id="selector" class="navbar navbar-default">
 <ul class="nav navbar-nav">
 <li><a href="#one">one</a> </li>
 <li><a href="#two">two</a> </li>
 <li><a href="#three">three</a> </li>
 </ul>
</div>
<div data-spy="scroll" data-target="#selector" style="height:100px; overflow:hidden;overflow-y: auto;" >
 <h4 id="one" >ibe</h4><p>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/></p>
 <h4 id="two" >two</h4><p>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/></p>
 <h4 id="three" >three</h4><p>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/></p>
</div>

源码分析:
1、原理:当滚动容器内的hashkey位置距离容器顶部只有 offset设置的值,就会设置导航中对应的href高亮
2、如果滚动区域是body,会将滚动区域元素标记为window(构造函数中判断)
this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
3、getScrolHeight:获取滚动容器的内容高度(包含被隐藏部分)
this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
4、refresh:刷新并存储滚动容器内各hashkey的值
  4.1、默认用offset来获取定位值,如果滚动区域不是window则用position来获取

if (!$.isWindow(this.$scrollElement[0])) {
  offsetMethod = 'position'
  offsetBase = this.$scrollElement.scrollTop() //获取基础高度,如果滚动区域内有不参与滚动计算的内容
 }

  4.2、根据导航上的hashkey来遍历获取 滚动区域内的hashkey对应的offset值:

this.$body
 .find(this.selector)
 .map(function () {
 var $el = $(this)
 var href = $el.data('target') || $el.attr('href')
 var $href = /^#./.test(href) && $(href) //获取滚动区域内的hashkey对应的元素

 return ($href
 && $href.length
 && $href.is(':visible')
 && [[$href[offsetMethod]().top + offsetBase, href]]) || null
 })
 .sort(function (a, b) { return a[0] - b[0] })
 .each(function () {
 that.offsets.push(this[0])
 that.targets.push(this[1])
 })

5、process:滚动条事件触发函数,用于计算当前需要高亮那个导航菜单
   5.1、获取滚动容器已滚动距离:
var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset
   5.2、滚动容器可以滚动的最大高度

//最大可以滚动高度=滚动设置距离(offset)+ 滚动容器内容高度 - 滚动容器设置的高度
var maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height()

   5.3、设置滚动元素逻辑:

for (i = offsets.length; i--;) {//遍历所有的offset
 activeTarget != targets[i] //判断当前target是否等于activeTarget
 && scrollTop >= offsets[i] //滚动高度>i元素的offset
 && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1]) //i + 1元素不存在,或者i+1元素不大于滚动高度
 && this.activate(targets[i]) //设置i为当前活动项
 }

6、active:设置指定的导航菜单高亮
7、clear:清除所有高亮菜单

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

相关文章

  • String.prototype实现的一些javascript函数介绍

    String.prototype实现的一些javascript函数介绍

    这篇文章主要是对String.prototype实现的一些javascript函数进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • javascript实现简易计算器的代码

    javascript实现简易计算器的代码

    下面小编就为大家带来一篇javascript实现简易计算器的代码小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS实现超级好看的鼠标小尾巴特效

    JS实现超级好看的鼠标小尾巴特效

    这篇文章主要给大家介绍了关于JS实现超级好看的鼠标小尾巴特效的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • js控制input输入字符解析

    js控制input输入字符解析

    本篇文章主要是对js控制input输入字符方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 实现网页内容水平或垂直滚动的Javascript代码

    实现网页内容水平或垂直滚动的Javascript代码

    用Javascript实现新闻内容的水平或垂直滚动,主要的优点是我们可以实现自定义滚动风格或特效,应用效果比起传统的marquee更加具有特色,方法也比较简单
    2012-10-10
  • JS实现贪吃蛇游戏

    JS实现贪吃蛇游戏

    这篇文章主要介为大家详细绍了JS实现贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JS实现小星星特效

    JS实现小星星特效

    这篇文章主要为大家详细介绍了JS实现小星星特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • Ajax实现邮箱验证实例代码

    Ajax实现邮箱验证实例代码

    这篇文章介绍了Ajax实现邮箱验证的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • 如何利用js给自己照相并修图

    如何利用js给自己照相并修图

    在一些浏览器里已经可以使用web api调用摄像头功能了,下面这篇文章主要给大家介绍了关于如何利用js给自己照相并修图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 详解Howler.js Web音频播放终极解决方案

    详解Howler.js Web音频播放终极解决方案

    这篇文章主要介绍了详解Howler.js Web音频播放终极解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08

最新评论