bootstrap源碼分析之scrollspy（滾動偵聽）
源碼文件：
Scrollspy.js
實現功能
1、當滾動區域內設置的hashkey距離頂點到有效位置時，就關聯設置其導航上的指定項
2、導航必須是 .nav > li > a 結構，並且a上href或data-target要綁定hashkey
3、菜單上必須有.nav樣式
4、滾動區域的data-target與導航父級Id（一定是父級）要一致
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
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
>
|
源碼分析：
1、原理：當滾動容器內的hashkey位置距離容器頂部只有 offset設置的值，就會設置導航中對應的href高亮
2、如果滾動區域是body，會將滾動區域元素標記為window（構造函數中判斷）
this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
3、getScrolHeight：獲取滾動容器的內容高度（包含被隱藏部分）
this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
4、refresh：刷新並存儲滾動容器內各hashkey的值
4.1、默認用offset來獲取定位值，如果滾動區域不是window則用position來獲取
|
1
2
3
4
|
if
(!$.isWindow(
this
.$scrollElement[0])) {
offsetMethod =
'position'
offsetBase =
this
.$scrollElement.scrollTop()
//獲取基礎高度，如果滾動區域內有不參與滾動計算的內容
}
|
4.2、根據導航上的hashkey來遍歷獲取 滾動區域內的hashkey對應的offset值：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
this
.$body
.find(
this
.selector)
.map(
function
() {
var
$el = $(
this
)
var
href = $el.data(
'target'
) || $el.attr(
'href'
)
var
$href = /^
#./.test(href) && $(href) //獲取滾動區域內的hashkey對應的元素
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])
})
|
5、process：滾動條事件觸發函數，用於計算當前需要高亮那個導航菜單
5.1、獲取滾動容器已滾動距離：
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
5.2、滾動容器可以滾動的最大高度
|
1
2
|
//最大可以滾動高度=滾動設置距離（offset）+ 滾動容器內容高度 - 滾動容器設置的高度
var
maxScroll =
this
.options.offset + scrollHeight -
this
.$scrollElement.height()
|
5.3、設置滾動元素邏輯：
|
1
2
3
4
5
6
|
for
(i = offsets.length; i--;) {
//遍歷所有的offset
activeTarget != targets[i]
//判斷當前target是否等於activeTarget
&& scrollTop >= offsets[i]
//滾動高度>i元素的offset
&& (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
//i + 1元素不存在，或者i+1元素不大於滾動高度
&&
this
.activate(targets[i])
//設置i為當前活動項
}
|
6、active：設置指定的導航菜單高亮
7、clear：清除所有高亮菜單