浅谈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 相关文章推荐
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
Python import自定义模块方法
2015/02/12 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python求解正态分布置信区间教程
2019/11/20 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
搞笑征婚广告词
2014/03/17 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
专职安全员岗位职责
2015/04/11 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
商务信函英语问候语
2015/11/10 职场文书
nginx.conf配置文件结构小结
2022/04/08 Servers
Golang 链表的学习和使用
2022/04/19 Golang