Talking about the scrollspy of Bootstrap source analysis (scrolling listening) _javascript skills

Source file:

Scrollspy.js

Implementation features

1. Set the specified item on its navigation when the HashKey distance from the vertex to the valid position in the scrolling region

2, the navigation must be. Nav > li > A structure, and a on href or data-target to bind HashKey

3, the menu must have. NAV Style

4, scrolling area of the Data-target and navigation parent ID (must be the parent) to be consistent

 <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; "> 
 
 

SOURCE Analysis:

1. Principle: When the HashKey position within the scrolling container is only the value of offset set at the top of the container, the corresponding href highlighting in the navigation is set.

2. If the scrolling area is body, the scrolling area element is marked as window (judged in the constructor)

this. $scrollElement = $ (Element). is (document.body)? $ (window): $ (Element)

3, Getscrolheight: Get the content height of the scrolling container (including hidden parts)

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

4. Refresh: Refreshes and stores the values of each hashkey in the scrolling container

4.1, by default with offset to get the positioning value, if the scrolling area is not window, use position to get

if (!$.iswindow (this. $scrollElement [0])) {
   Offsetmethod = ' position '
   offsetbase  = this.$ Scrollelement.scrolltop ()//Get the base height if there is content in the scrolling area that does not participate in the scrolling calculation
  }

4.2, according to the navigation of the HashKey to traverse to get the scrolling area of the HashKey corresponding offset value:

this. $body
   . Find (This.selector)
   . Map (function () {
    var $el  = $ (this)
    var href = $el. Data (' Target ' ) || $el. attr (' href ')
    var $href =/^#./.test (HREF) && $ (HREF)//get the corresponding element of the HashKey in the scrolling region 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: Scroll bar Event trigger function, used to calculate the current need to highlight the navigation menu

5.1, get the scrolling container has been scrolled distance:

var scrolltop  = this. $scrollElement. scrolltop () + This.options.offset

5.2, scrolling container can scroll the maximum height

Maximum can scroll height = scrolling set distance (offset) + scrolling container content height-scrolling container set height
var maxscroll  = This.options.offset + scrollheight-this.$ Scrollelement.height ()

5.3. Set scrolling element logic:

for (i = offsets.length; i--;) {//Traverse all offset
   activetarget!= targets[i]//Determine if current target is equal to Activetarget
    && scrolltop >= offsets[i] Scrolling height >i element's offset
    && (offsets[i + 1] = = Undefined | | scrolltop < OFFSETS[I + 1])//i + 1 element does not exist, or the i+1 element is not large To scroll height
    && this.activate (targets[i])//Set I to current active item
  }

6, Active: Set the specified navigation menu highlighting

7. Clear: Clears all highlighted menus

The above article on the bootstrap source code analysis of the Scrollspy (scrolling listening) is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.