全面解析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浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
sails框架的学习指南
Dec 22 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
node.js实现带进度条的多文件上传
Mar 27 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
改进的IP计数器
2006/10/09 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
JSON相关知识汇总
2015/07/03 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
python 截取 取出一部分的字符串方法
2017/03/01 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
Python类及获取对象属性方法解析
2020/06/15 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
如何手工释放资源
2013/12/15 面试题
护理专科自荐书范文
2014/02/18 职场文书
《菜园里》教学反思
2014/04/17 职场文书
图书室标语
2014/06/21 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
房屋出租委托书格式
2014/09/23 职场文书
教育实习指导教师评语
2014/12/31 职场文书
第二次离婚起诉书
2015/05/18 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
趣味运动会口号
2015/12/24 职场文书
基于python实现银行管理系统
2021/04/20 Python
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android