Bootstrap外掛scrollspy原始碼的學習
阿新 • • 發佈:2018-12-27
/** * 根據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方法