全面解析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 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
全面了解js中的script标签
Jul 04 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
JavaScript 实现页面滚动动画
Apr 24 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
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js创建对象的方式总结
2015/01/10 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python3爬取各类天气信息
2018/02/24 Python
python生成带有表格的图片实例
2019/02/03 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
python用Configobj模块读取配置文件
2020/09/26 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
校园广播稿精选
2014/10/01 职场文书
教研活动主持词
2015/07/03 职场文书
学子宴致辞大全
2015/07/27 职场文书