全面解析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 相关文章推荐
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
VUE中使用MUI方法
Feb 12 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
详解CocosCreator项目结构机制
Apr 14 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
2.PHP入门
2006/10/09 PHP
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php分页函数完整实例代码
2014/09/22 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Python实时获取cmd的输出
2015/12/13 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
2014年健康教育实施方案
2014/02/17 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
管理标语大全
2014/06/24 职场文书
学生检讨书范文
2014/10/30 职场文书
PyTorch中permute的使用方法
2022/04/26 Python