浅谈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 function使用心得
May 10 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
axios封装与传参示例详解
Oct 18 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
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
星际玩家的三大定律
2020/03/04 星际争霸
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
工业自动化专业毕业生推荐信
2013/11/18 职场文书
节水标语大全
2014/06/11 职场文书
啦啦队口号大全
2014/06/16 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python