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


Posted in Javascript onJune 06, 2016

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个精彩的专题:

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

Javascript 相关文章推荐
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
javascript表单事件处理方法详解
May 15 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
JavaScript 数组中最大最小值
Jun 05 #Javascript
使用three.js 画渐变的直线
Jun 05 #Javascript
jquery判断input值不为空的方法
Jun 05 #Javascript
jQuery四种选择器使用及示例
Jun 05 #Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 #Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 #Javascript
EasyUI布局 高度自适应
Jun 04 #Javascript
You might like
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
JavaScript与函数式编程解释
2007/04/27 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
一行python实现树形结构的方法
2019/08/09 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
Python实现上下文管理器的方法
2020/08/07 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
数控专业应届生求职信
2013/11/27 职场文书
保护环境倡议书300字
2014/05/19 职场文书
护士医德医风自我评价
2014/09/15 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
捐资助学感谢信
2015/01/21 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
python中对列表的删除和添加方法详解
2022/02/24 Python