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：清除所有高亮菜单