Bootstrap中滾動監視器功能實現-js教程-PHP中文網

前面的話

　　滾動監聽外掛程式是用來根據捲軸所處的位置來自動更新導覽項目的。捲動導覽條下面的區域並關注導覽項目的變化，下拉式選單中的項目也會自動高亮顯示。本文將詳細介紹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 id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation" style="position:relative"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div data-spy="scroll" data-target="#myNavbar" style="margin-top:150px;height:250px;overflow:auto;position:relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">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元素】

<body data-spy="scroll" data-target="#myNavbar" style="height:300px;position:relative"><div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><h4 id="html" style="margin-top:150px">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></body>

登入後複製

#JS呼叫

　　在Bootstrap框架中，使用JavaScript方法觸發滾動監控器相對來說較為簡單，只需要指定兩個容器的名稱即可

<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div id="scrollspy"  style="margin-top:150px;height:250px;overflow:auto;position:relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">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>$('#scrollspy').scrollspy({ target: '#myNavbar' })    
</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 id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div id="scrollspy" data-spy="scroll" data-target="#myNavbar"  data-offset="0" style="margin-top:150px;height:250px;overflow:auto;position;relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">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('activate.bs.scrollspy',function(e){
        $(e.target).siblings().css('outline','none')
            .end().css('outline','1px solid black');    
    })
})    
</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 > 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) && $(href)//返回一个二维数组，每个滚动容器内的id对象到页面顶部的距离以及高亮菜单容器里所对应的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 () {//收集所有的偏移值，也就是距离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 >= maxScroll) {      //如果最后一个元素还没有高亮，则设置最后一个元素高亮  return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
    }if (activeTarget && scrollTop < offsets[0]) {      this.activeTarget = null  return this.clear()
    }//倒序遍历所有元素的offsetfor (i = offsets.length; i--;) {      //如果i元素不等于当前高亮元素  activeTarget != targets[i]//滚动高度 大于 i元素的offsets&& scrollTop >= offsets[i]//i+1元素不存在，或者i+1元素大于滚动高度&& (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])//则设置i为高亮元素&& this.activate(targets[i])
    }
  }  //设置高亮菜单元素
  ScrollSpy.prototype.activate = function (target) {//赋值实例属性this.activeTarget = targetthis.clear()//查找菜单中符合[data-target+"#' + 所高亮元素的id + '"]属性的元素//或者href值是#' +  所高亮元素的id + '的话，也可以var selector = this.selector +
      '[data-target="' + target + '"],' +      this.selector + '[href="' + target + '"]'//查找父元素li，然后添加active高亮样式var active = $(selector)
      .parents('li')
      .addClass('active')//如果li元素的父元素有dropdown-menu样式，则表示是一个dropdown下拉菜单if (active.parent('.dropdown-menu').length) {
      active = active
        .closest('li.dropdown')//则需要给dropdown的li元素也加上active高亮样式.addClass('active')
    }//触发自定义高亮事件active.trigger('activate.bs.scrollspy')
  }  
  //删除其他高亮元素的active样式
  ScrollSpy.prototype.clear = function () {
    $(this.selector)
      .parentsUntil(this.options.target, '.active')
      .removeClass('active')
  }

登入後複製

【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' && 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中文網其他相關文章！