bootstrap source code analysis scrollspy (scroll listening)
Source code file:
Scrollspy.js
Implement functions
1. When the hashkey set in the scrolling area reaches the valid position, the specified item on its navigation is set in association.
2. The navigation must be .nav > li > a structure, and the hashkey on a href or data-target must be bound to the hashkey
3. There must be .nav style on the menu
4. The data-target in the scrolling area should be consistent with the navigation parent Id (must be the parent)
<div id="selector"> <ul> <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 specific content<br/>One specific content<br/>One specific content<br/>One specific content<br/></p> <h4 id="two" >two</h4><p>One specific content<br/>One specific content<br/></p> <h4 id="three" >three</h4><p>One specific content<br/>One specific content<br/></p> <h4 id="three" >three</h4><p>One specific content<br/>One specific content<br/></p> <h4 id="three" >three</h4><p>One specific content<br/>One specific content<br/>One specific content<br/></p>
Source code analysis:
1. Principle: When the hashkey position in the scroll container is only the value set by offset on the top of the container, the corresponding href highlighting in the navigation will be set.
2. If the scrolling area is a body, the scrolling area element will be marked as window (judged in the constructor)
this.$scrollElement = $(element).is(document.body) ? $(window): $(element)
3. getScrolHeight: Get the content height of the scroll container (including the hidden part)
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 scroll container
4.1. Use offset to get the positioning value by default. If the scrolling area is not window, use position to get it.
if (!$.isWindow(this.$scrollElement[0])) { offsetMethod = 'position' offsetBase = this.$scrollElement.scrollTop() //Get the base height, if there is content in the scroll area that does not participate in the scroll calculation}4.2. According to the hashkey on the navigation, traversal and get the offset value corresponding to the hashkey in the scrolling area:
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 element corresponding to the hashkey in the scrolling area 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: The scrollbar event trigger function is used to calculate which navigation menu needs to be highlighted currently
5.1. Get the scrolling distance of the scroll container:
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
5.2. The maximum height that the rolling container can roll
//Maximum scrollable 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 scrolling element logic:
for (i = offsets.length; i--;) {//Transfer all offset activeTarget != targets[i] //Judge whether the current target is equal to activeTarget && scrollTop >= offsets[i] //Scroll height> offset && (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]) //Set i as the current active item}6. Active: Set the specified navigation menu to highlight
7. Clear: Clear all highlighted menus
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.