Bootstrap滚动监听组件scrollspy.js使用方法详解


Posted in Javascript onJuly 20, 2017

其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮。

实现功能

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>

下面来看一下实现的具体代码,原理:当滚动容器内的hashkey位置距离容器顶部只有 offset设置的值,就会设置导航中对应的href高亮。

ScrollSpy构造函数

首先新建一个构造函数,如下:

function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector    = (this.options.target || '') + ' .nav li > a'
  this.offsets    = []
  this.targets    = []
  this.activeTarget  = null
  this.scrollHeight  = 0
  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
 }

该构造函数主要干了啥:

1.基本设置,主要是设置当前滚动元素是设置的body还是具体的某一块元素;其次是导航的结构要是.nav li > a的结构,也就是你的菜单中也要有.nav这个class。

2.监听元素滚动的时候,执行process方法。

3.同时初始化的时候也执行了refresh与process方法。

下面讲解一下这几个方法。

getScrolHeight方法

获取滚动容器的内容高度(包含被隐藏部分)

this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)

refresh方法

刷新并存储滚动容器内各hashkey的值

ScrollSpy.prototype.refresh = function () {
  var that     = this
  var offsetMethod = 'offset'
  var offsetBase  = 0

  this.offsets   = []
  this.targets   = []
  this.scrollHeight = this.getScrollHeight()

  if (!$.isWindow(this.$scrollElement[0])) {
   offsetMethod = 'position'
   offsetBase  = this.$scrollElement.scrollTop()
  }

  this.$body
   .find(this.selector)
   .map(function () {
    var $el  = $(this)
    var href = $el.data('target') || $el.attr('href')
    var $href = /^#./.test(href) && $(href)
    
    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])
   })

 }

它主要实现了什么呢?

1.默认用offset来获取定位值,如果滚动区域不是window则用position来获取

if (!$.isWindow(this.$scrollElement[0])) {
   offsetMethod = 'position'
   offsetBase  = this.$scrollElement.scrollTop()
  }

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)
    
    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])
   })

process方法

滚动条事件触发函数,用于计算当前需要高亮那个导航菜单

ScrollSpy.prototype.process = function () {
  var scrollTop  = this.$scrollElement.scrollTop() + this.options.offset
  var scrollHeight = this.getScrollHeight()
  var maxScroll  = this.options.offset + scrollHeight - this.$scrollElement.height()
  var offsets   = this.offsets
  var targets   = this.targets
  var activeTarget = this.activeTarget
  var i

  if (this.scrollHeight != scrollHeight) {
   this.refresh()
  }

  if (scrollTop >= maxScroll) {
   return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
  }

  if (activeTarget && scrollTop < offsets[0]) {
   this.activeTarget = null
   return this.clear()
  }

  for (i = offsets.length; i--;) {
   activeTarget != targets[i]
    && scrollTop >= offsets[i]
    && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
    && this.activate(targets[i])
  }
 }

主要作用:

1.获取滚动容器已滚动距离:

var scrollTop  = this.$scrollElement.scrollTop() + this.options.offset

2.滚动容器可以滚动的最大高度:

var maxScroll  = this.options.offset + scrollHeight - this.$scrollElement.height()

3.设置滚动元素逻辑,给当前匹配元素添加高亮:

for (i = offsets.length; i--;) {
   activeTarget != targets[i]
    && scrollTop >= offsets[i]
    && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
    && this.activate(targets[i])
  }

active方法

设置指定的导航菜单高亮

ScrollSpy.prototype.activate = function (target) {
  this.activeTarget = target

  this.clear()

  var selector = this.selector +
   '[data-target="' + target + '"],' +
   this.selector + '[href="' + target + '" rel="external nofollow" rel="external nofollow" ]'

  var active = $(selector)
   .parents('li')
   .addClass('active')

  if (active.parent('.dropdown-menu').length) {
   active = active
    .closest('li.dropdown')
    .addClass('active')
  }

  active.trigger('activate.bs.scrollspy')
 }

clear方法

清除所有高亮菜单

ScrollSpy.prototype.clear = function () {
  $(this.selector)
   .parentsUntil(this.options.target, '.active')
   .removeClass('active')
 }

 源码

+function ($) {
 'use strict';

 // SCROLLSPY CLASS DEFINITION
 // ==========================

 function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector    = (this.options.target || '') + ' .nav li > a'
  this.offsets    = []
  this.targets    = []
  this.activeTarget  = null
  this.scrollHeight  = 0
  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
 }

 ScrollSpy.VERSION = '3.3.7'

 ScrollSpy.DEFAULTS = {
  offset: 10
 }

 ScrollSpy.prototype.getScrollHeight = function () {
  return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
 }

 ScrollSpy.prototype.refresh = function () {
  var that     = this
  var offsetMethod = 'offset'
  var offsetBase  = 0

  this.offsets   = []
  this.targets   = []
  this.scrollHeight = this.getScrollHeight()

  if (!$.isWindow(this.$scrollElement[0])) {
   offsetMethod = 'position'
   offsetBase  = this.$scrollElement.scrollTop()
  }

  this.$body
   .find(this.selector)
   .map(function () {
    var $el  = $(this)
    var href = $el.data('target') || $el.attr('href')
    var $href = /^#./.test(href) && $(href)
    
    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])
   })

 }

 ScrollSpy.prototype.process = function () {
  var scrollTop  = this.$scrollElement.scrollTop() + this.options.offset
  var scrollHeight = this.getScrollHeight()
  var maxScroll  = this.options.offset + scrollHeight - this.$scrollElement.height()
  var offsets   = this.offsets
  var targets   = this.targets
  var activeTarget = this.activeTarget
  var i

  if (this.scrollHeight != scrollHeight) {
   this.refresh()
  }

  if (scrollTop >= maxScroll) {
   return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
  }

  if (activeTarget && scrollTop < offsets[0]) {
   this.activeTarget = null
   return this.clear()
  }

  for (i = offsets.length; i--;) {
   activeTarget != targets[i]
    && scrollTop >= offsets[i]
    && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
    && this.activate(targets[i])
  }
 }

 ScrollSpy.prototype.activate = function (target) {
  this.activeTarget = target

  this.clear()

  var selector = this.selector +
   '[data-target="' + target + '"],' +
   this.selector + '[href="' + target + '" rel="external nofollow" rel="external nofollow" ]'

  var active = $(selector)
   .parents('li')
   .addClass('active')

  if (active.parent('.dropdown-menu').length) {
   active = active
    .closest('li.dropdown')
    .addClass('active')
  }

  active.trigger('activate.bs.scrollspy')
 }

 ScrollSpy.prototype.clear = function () {
  $(this.selector)
   .parentsUntil(this.options.target, '.active')
   .removeClass('active')
 }


 // SCROLLSPY PLUGIN DEFINITION
 // ===========================

 function Plugin(option) {
  return this.each(function () {
   var $this  = $(this)
   var data  = $this.data('bs.scrollspy')
   var options = typeof option == 'object' && option

   if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
   if (typeof option == 'string') data[option]()
  })
 }

 var old = $.fn.scrollspy

 $.fn.scrollspy       = Plugin
 $.fn.scrollspy.Constructor = ScrollSpy


 // SCROLLSPY NO CONFLICT
 // =====================

 $.fn.scrollspy.noConflict = function () {
  $.fn.scrollspy = old
  return this
 }


 // SCROLLSPY DATA-API
 // ==================

 $(window).on('load.bs.scrollspy.data-api', function () {
  $('[data-spy="scroll"]').each(function () {
   var $spy = $(this)
   Plugin.call($spy, $spy.data())
  })
 })

}(jQuery);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 #Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 #Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 #Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 #Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 #Javascript
关于webpack代码拆分的解析
Jul 20 #Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php执行sql语句的写法
2009/03/10 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
JS控制表格隔行变色
2006/06/26 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
Python使用py2exe打包程序介绍
2014/11/20 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
最新计算机专业自荐信
2013/10/16 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
高中教师考核方案
2014/05/18 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
运动会广播稿300字
2015/08/19 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python