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


Posted in Javascript onJune 06, 2016

源码文件:

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:清除所有高亮菜单

以上这篇浅谈bootstrap源码分析之scrollspy(滚动侦听)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
理解JavaScript中的对象
Aug 25 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 #Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 #Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 #Javascript
JavaScript 数组中最大最小值
Jun 05 #Javascript
使用three.js 画渐变的直线
Jun 05 #Javascript
jquery判断input值不为空的方法
Jun 05 #Javascript
jQuery四种选择器使用及示例
Jun 05 #Javascript
You might like
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
有原因的手表:Flex Watches
2019/03/23 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
利用Python实现Picgo图床工具
2021/11/23 Python