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 cookie操作代码
Mar 14 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
js构造函数创建对象是否加new问题
Jan 22 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
angular *Ngif else用法详解
Dec 15 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
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
pandas如何处理缺失值
2019/07/31 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
python实现超级马里奥
2020/03/18 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
给民警的表扬信
2014/01/08 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
yy司仪主持词
2014/03/22 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
让生命充满爱观后感
2015/06/08 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python