登录  /  注册
首页 > web前端 > js教程 > 正文

Bootstrap中滚动监控器功能实现

巴扎黑
发布: 2017-07-23 15:26:51
原创
1138人浏览过

前面的话

  滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。滚动导航条下面的区域并关注导航项的变化,下拉菜单中的条目也会自动高亮显示。本文将详细介绍bootstrap滚动监控器

 

基本用法

  滚动监听插件是根据滚动的位置自动更新导航条中相应的导航项的,该插件可自动检测到达哪个位置了,然后在需要高亮的菜单父元素上加了一个active样式

  如果导航里有下拉菜单,并且滚动区域的内容到达下拉菜单子项所对应的区域,除了子菜单高亮之外,子菜单的父元素(dropdown按钮)也会高亮

  在平时使用的过程中,滚动监听一般有两种用法,一种是固定一个元素的高度,进行滚动,然后对相应的菜单进行高亮显示;另外一种是对整个页面(body)进行滚动监听。两种方式的用法一样,都需要有如下3个步骤:

  1、设置滚动容器,即在所要监听的元素上设置data-target="#selector" data-spy="scroll"属性

  2、设置菜单链接容器,该容器的id(或样式)和data-target属性所对应的选择符要一致

  3、在菜单容器内,必须有.nav样式的元素,并且在其内容有li元素,li内包含的a元素也是可以侦测高亮的菜单链接,即符合.nav li > a这种选择符的条件

  4、无论何种实现方式,滚动监听都需要被监听的组件是 position: relative; 即相对定位方式

【固定元素高度】

<div> <ul>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
<li><a>javascript</a></li> </ul>
</div><div>
<h4>Html</h4>
<p>Html内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<h4>CSS</h4>
<p>CSS内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<h4>javascript</h4>
<p>javascript内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
</div>
登录后复制

【body元素】

<div> <ul>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
<li><a>javascript</a></li> </ul>
</div><h4>Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4>CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4>javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p>
登录后复制

 

JS调用

  在Bootstrap框架中,使用JavaScript方法触发滚动监控器相对来说较为简单,只需要指定两个容器的名称即可

<div> <ul>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
<li><a>javascript</a></li> </ul>
</div><div>
<h4>Html</h4>
<p>Html内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<h4>CSS</h4>
<p>CSS内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<h4>javascript</h4>
<p>javascript内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
</div><script>$(&#39;#scrollspy&#39;).scrollspy({ target: &#39;#myNavbar&#39; })    
</script>
登录后复制

 

方法

  当使用滚动监听插件的同时在 DOM 中添加或删除元素后,需要像下面这样调用此刷新( refresh) 方法 

$('[data-spy="scroll"]').each(function () {  var $spy = $(this).scrollspy('refresh')
})
登录后复制

  要注意的是,这种refresh方法只对声明式用法有效。如果使用的是JS触发,并且需要刷新DOM,则需要重新应用该插件;或者从data-scrollspy属性上获取该实例,然后再调用refresh方法

【参数】

  可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,其名称是将参数名附着到 data- 后面组成,例如 data-offset=""

  滚动监控提供了一个offset参数,此参数默认值为10。默认情况下,滚动内容距离滚动容器10px以内的话,就高亮显示所对应的菜单项

【事件】

  滚动监控也支持事件的订阅和触发功能,目前只支持一个activate事件

activate.bs.scrollspy    每当一个新条目被激活后都将由滚动监听插件触发此事件。
登录后复制
<div> <ul>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
<li><a>javascript</a></li> </ul>
</div><div>
<h4>Html</h4>
<p>Html内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<h4>CSS</h4>
<p>CSS内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<h4>javascript</h4>
<p>javascript内容</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
<br><p>...</p>
</div><script>$(function(){
    $("#myNavbar").on(&#39;activate.bs.scrollspy&#39;,function(e){
        $(e.target).siblings().css(&#39;outline&#39;,&#39;none&#39;)
            .end().css(&#39;outline&#39;,&#39;1px solid black&#39;);    
    })
})    
</script>
登录后复制

 

JS源码

【1】IIFE

  使用立即调用函数,防止插件内代码外泄,从而形成一个闭环,并且只能从jQuery的fn里进行扩展

+function ($) {//使用es5严格模式'use strict';//}(window.jQuery);
登录后复制

【2】初始设置

  function ScrollSpy(element, options) {this.$body          = $(document.body)//判断滚动容器是否是body,如果是则使用window,如果不是则使用该元素本身this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)//将默认值和传进来的options参数合并,后者优先级高this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)//如果option里设置了target,即data-target有值,则优先使用//如果没有,则查找通过.nav样式的子元素,即.nav样式内的li子元素内的a链接,作为菜单容器this.selector       = (this.options.target || '') + ' .nav li &gt; a'this.offsets        = []this.targets        = []//高亮显示的菜单this.activeTarget   = nullthis.scrollHeight   = 0//给滚动容器绑定滚动事件this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))//计算当前页面内所有滚动容器内的id集合和每个id元素距离浏览器顶部的像素距离this.refresh()//开始正式处理this.process()
  }  //版本是3.3.7
  ScrollSpy.VERSION  = '3.3.7'  //默认值为offset:10
  ScrollSpy.DEFAULTS = {
    offset: 10
  }
登录后复制

【3】插件核心代码

  //获取滚动容器的滚动高度
  ScrollSpy.prototype.getScrollHeight = function () {//获取特定滚动容器的滚动高度,如果没有则获取body元素的滚动高度return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
  }

  ScrollSpy.prototype.refresh = function () {var that          = thisvar offsetMethod  = 'offset'var offsetBase    = 0this.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) &amp;&amp; $(href)//返回一个二维数组,每个滚动容器内的id对象到页面顶部的距离以及高亮菜单容器里所对应的href值return ($href          &amp;&amp; $href.length          &amp;&amp; $href.is(':visible')          &amp;&amp; [[$href[offsetMethod]().top + offsetBase, href]]) || null  })
      .sort(function (a, b) { return a[0] - b[0] })
      .each(function () {//收集所有的偏移值,也就是距离top的距离that.offsets.push(this[0])//收集菜单容器里的所有href值,也就是滚动容器里的id值that.targets.push(this[1])
      })
  }

  ScrollSpy.prototype.process = function () {//获取滚动容器的scrollTop,再加上设置的offset值var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset//获取滚动高度var scrollHeight = this.getScrollHeight()//最大滚动=总scrollheight + 设置的offset值 - 设置高度heightvar maxScroll    = this.options.offset + scrollHeight - this.$scrollElement.height()var offsets      = this.offsetsvar targets      = this.targetsvar activeTarget = this.activeTargetvar iif (this.scrollHeight != scrollHeight) {      this.refresh()
    }//如果超过了最大滚动,说明已经滚动到底了if (scrollTop &gt;= maxScroll) {      //如果最后一个元素还没有高亮,则设置最后一个元素高亮  return activeTarget != (i = targets[targets.length - 1]) &amp;&amp; this.activate(i)
    }if (activeTarget &amp;&amp; scrollTop = offsets[i]//i+1元素不存在,或者i+1元素大于滚动高度&amp;&amp; (offsets[i + 1] === undefined || scrollTop 
登录后复制

【4】jQuery插件定义

  function Plugin(option) {//根据选择器,遍历所有符合规则的元素return this.each(function () {      var $this   = $(this)      //获取自定义属性bs.scrollspy的值  var data    = $this.data('bs.scrollspy')      //如果option参数是对象,则作为ScrollSpy的参数传入  var options = typeof option == 'object' &amp;&amp; option      //如果值不存在,则将ScrollSpy实例设置为bs.scrollSpy值  if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))      //如果option传递了string,则表示要执行某个方法  if (typeof option == 'string') data[option]()
    })
  }  var old = $.fn.scrollspy  //保留其他库的$.fn.scrollspy代码(如果定义的话),以便在noConflict之后可以继续使用该老代码
  $.fn.scrollspy             = Plugin  //重设插件构造器,可以通过该属性获取插件的真实类函数
  $.fn.scrollspy.Constructor = ScrollSpy
登录后复制

【5】防冲突处理

  $.fn.scrollspy.noConflict = function () {     //恢复以前的旧代码$.fn.scrollspy = old//将$.fn.scrollspy.noConflict()设置为Bootstrap的Scrollspy插件return this
  }
登录后复制

【6】绑定触发事件

  $(window).on('load.bs.scrollspy.data-api', function () {//遍历所有符合条件的滚动容器$('[data-spy="scroll"]').each(function () {      var $spy = $(this)      //执行scrollspy插件,并传入滚动容器上设置的自定义参数(data-开头)      Plugin.call($spy, $spy.data())
    })
  })
登录后复制

 

以上就是Bootstrap中滚动监控器功能实现的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号