Bootstrap source code analysis-scrollspy (rolling listening) and bootstrapscrollspy

Bootstrap source code analysis-scrollspy (rolling listening) and bootstrapscrollspy
Source code file:

Scrollspy. js implementation function

1. When the hashkey set in the rolling area is from the vertex to the valid position, it is associated with the specified item in its navigation
2. The navigation must be in the. nav> li> a structure, and href or data-target on a must be bound to a hashkey.
3. The menu must have a. nav style.
4. The data-target of the rolling area must be consistent with the parent-level Id of the navigation (must be the parent level ).

<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">this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)

3. getScrolHeight: Get the content height of the rolling container (including hidden parts)

this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)

4. refresh: refresh and store the values of each hashkey in the rolling container.
4.1 By default, offset is used to obtain the position value. If the rolling area is not a window, position is used to obtain the position value.

If (! $. IsWindow (this. $ scrollElement [0]) {offsetMethod = 'position' offsetBase = this. $ scrollElement. scrollTop () // obtain the base height. If any content in the rolling area does not participate in rolling calculation}

4.2 retrieve the offset value corresponding to the hashkey in the rolling area based on the hashkey in the navigation bar:

This. $ body. find (this. selector ). map (function () {var $ el = $ (this) var href = $ el. data ('target') | $ el. attr ('href ') var $ href =/^ #. /. test (href) & $ (href) // obtain the 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.tar gets. push (this [1])})

5. process: the scroll bar event trigger function is used to calculate the navigation menu to be highlighted.
5.1. Get the rolling distance of the rolling container:

var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset

5.2. Maximum scroll height of a rolling container

// Maximum scroll Height = scroll setting distance (offset) + scroll container content height-scroll container setting height var maxScroll = this. options. offset + scrollHeight-this. $ scrollElement. height ()

5.3 set the scrolling Element Logic:

For (I = offsets. length; I --;) {// traverses all offset activeTarget! = Targets [I] // determines whether the current target is equal to activeTarget & scrollTop> = offsets [I] // The scroll height> the offset of the I element & (offsets [I + 1] === undefined | scrollTop <offsets [I + 1]) // The I + 1 element does not exist, or the I + 1 element is not greater than the scroll Height & this. activate (targets [I]) // sets I as the current activity item}

6. active: Set the specified navigation menu to highlight
7. clear: clear all highlighted menus