1. 程式人生 > >Bootstrap外掛scrollspy原始碼的學習

Bootstrap外掛scrollspy原始碼的學習

/**
 * 根據this.offsets與當前的scrollTop比較,判斷是否需要activate
 * @return {undefined} 沒有返回值
 */
ScrollSpy.prototype.process = function () {
  var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset // 加上規定offset的,距離頂部的值
  var scrollHeight = this.getScrollHeight() // 當前的內容高度
  var maxScroll    = this.options.offset + scrollHeight - this.$scrollElement.height() // offset值+內容高度-可視高度得到的最大可滾動高度
  var offsets      = this.offsets
  var targets      = this.targets
  var activeTarget = this.activeTarget // 當前的啟用nav
  var i

  if (this.scrollHeight != scrollHeight) {
    this.refresh()
  }
  // 超過當前元素的最大可滾動高度,直接啟用最後一個nav
  if (scrollTop >= maxScroll) {
    return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
  }
  // 沒超過第一個offset,清除當前的啟用物件
  if (activeTarget && scrollTop < offsets[0]) {
    this.activeTarget = null
    return this.clear()
  }
  // 最精彩的部分,迴圈判斷是否需要啟用
  for (i = offsets.length; i--;) {
    activeTarget != targets[i] // 滿足當前遍歷的target不是啟用物件
      && scrollTop >= offsets[i] // 滿足當前滾動高度大於對應的offset
      && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1]) // 滿足當前滾動高度小於下一個滾動高度,或下一個滾動高度未定義
      && this.activate(targets[i]) // 啟用該nav
  }
}
  • activate方法