浅谈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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
javascript 数组操作详解
Jan 29 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
Vue.js中的computed工作原理
2018/03/22 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python线程池的实现实例
2013/11/18 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python编程嵌套函数实例代码
2018/02/11 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
个人授权委托书范文
2014/09/21 职场文书
素质教育学习心得体会
2016/01/19 职场文书
深入理解python多线程编程
2021/04/18 Python
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang