Home >Web Front-end >JS Tutorial >Implementation of scroll monitor function in Bootstrap
Implementation of scroll monitor function in Bootstrap
- 巴扎黑Original
- 2017-07-23 15:26:511341browse
Previous words
The scroll listening plug-in is used to automatically update navigation items based on the position of the scroll bar. Scroll the area below the navigation bar and pay attention to the changes in the navigation items. The items in the drop-down menu will also be automatically highlighted. This article will introduce in detail the Bootstrap scroll monitor
Basic usage
The scroll monitoring plug-in automatically updates the corresponding navigation items in the navigation bar based on the scrolling position. The plug-in can Automatically detect which position has been reached, and then add an active style
to the parent menu element that needs to be highlighted. If there is a drop-down menu in the navigation, and the content of the scroll area reaches the area corresponding to the sub-item of the drop-down menu, In addition to the submenu being highlighted, the parent element of the submenu (dropdown button) will also be highlighted
In daily use, scroll monitoring is generally used in two ways. One is to fix the height of an element. , scroll, and then highlight the corresponding menu; the other is to monitor the scrolling of the entire page (body). The usage of both methods is the same, and both require the following three steps:
1. Set the scroll container, that is, set data-target="#selector" data-spy="scroll" on the element you want to monitor. Attribute
2. Set the menu link container. The id (or style) of the container must be consistent with the selector corresponding to the data-target attribute
3. Within the menu container, there must be. A nav style element, and there is a li element in its content. The a element contained in li can also detect highlighted menu links, which meets the conditions of the .nav li > a selector
4 . Regardless of the implementation method, the component that needs to be monitored for scroll monitoring is position: relative; That is, the relative positioning method
[Fixed element height]
<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation" style="position:relative"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div data-spy="scroll" data-target="#myNavbar" style="margin-top:150px;height:250px;overflow:auto;position:relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div>
[body element]
<body data-spy="scroll" data-target="#myNavbar" style="height:300px;position:relative"><div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><h4 id="html" style="margin-top:150px">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></body>
In the Bootstrap framework, it is relatively simple to use JavaScript methods to trigger the scroll monitor. You only need to specify the names of two containers.
<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div id="scrollspy" style="margin-top:150px;height:250px;overflow:auto;position:relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div><script>$('#scrollspy').scrollspy({ target: '#myNavbar' })
</script>
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
}) It should be noted that this refresh method is only valid for declarative usage. If you are using JS trigger and need to refresh the DOM, you need to re-apply the plug-in; or get the instance from the data-scrollspy attribute and then call the refresh method[Parameter] Parameters can be passed via data attributes or JavaScript. For the data attribute, its name is formed by appending the parameter name to data-, for example data-offset=""
activate.bs.scrollspy 每当一个新条目被激活后都将由滚动监听插件触发此事件。
<div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation"> <ul class="nav navbar-nav"><li><a href="#html" tabindex="-1">HTML</a></li><li><a href="#css" tabindex="-1">CSS</a></li><li><a href="#javascript" tabindex="-1">javascript</a></li> </ul></div><div id="scrollspy" data-spy="scroll" data-target="#myNavbar" data-offset="0" style="margin-top:150px;height:250px;overflow:auto;position;relative"><h4 id="html">Html</h4><p>Html内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="css">CSS</h4><p>CSS内容</p><br><p>...</p><br><p>...</p><br><p>...</p><h4 id="javascript">javascript</h4><p>javascript内容</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p></div><script>$(function(){
$("#myNavbar").on('activate.bs.scrollspy',function(e){
$(e.target).siblings().css('outline','none')
.end().css('outline','1px solid black');
})
})
</script>
##JS source code
【1】 IIFE
Use the immediate call function to prevent the code in the plug-in from leaking, thus forming a closed loop, and it can only be expanded from jQuery’s fn
+function ($) {//使用es5严格模式'use strict';//}(window.jQuery);
[2] Initial settings
function ScrollSpy(element, options) {this.$body = $(document.body)//判断滚动容器是否是body，如果是则使用window，如果不是则使用该元素本身this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)//将默认值和传进来的options参数合并，后者优先级高this.options = $.extend({}, ScrollSpy.DEFAULTS, options)//如果option里设置了target，即data-target有值，则优先使用//如果没有，则查找通过.nav样式的子元素，即.nav样式内的li子元素内的a链接，作为菜单容器this.selector = (this.options.target || '') + ' .nav li > a'this.offsets = []this.targets = []//高亮显示的菜单this.activeTarget = nullthis.scrollHeight = 0//给滚动容器绑定滚动事件this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))//计算当前页面内所有滚动容器内的id集合和每个id元素距离浏览器顶部的像素距离this.refresh()//开始正式处理this.process()
} //版本是3.3.7
ScrollSpy.VERSION = '3.3.7' //默认值为offset：10
ScrollSpy.DEFAULTS = {
offset: 10
}
【3】Plugin core code
//获取滚动容器的滚动高度
ScrollSpy.prototype.getScrollHeight = function () {//获取特定滚动容器的滚动高度，如果没有则获取body元素的滚动高度return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
}
ScrollSpy.prototype.refresh = function () {var that = thisvar offsetMethod = 'offset'var offsetBase = 0this.offsets = []this.targets = []this.scrollHeight = this.getScrollHeight()if (!$.isWindow(this.$scrollElement[0])) {
offsetMethod = 'position' offsetBase = this.$scrollElement.scrollTop()
}this.$body
.find(this.selector)
.map(function () {var $el = $(this)var href = $el.data('target') || $el.attr('href')var $href = /^#./.test(href) && $(href)//返回一个二维数组，每个滚动容器内的id对象到页面顶部的距离以及高亮菜单容器里所对应的href值return ($href && $href.length && $href.is(':visible') && [[$href[offsetMethod]().top + offsetBase, href]]) || null })
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {//收集所有的偏移值，也就是距离top的距离that.offsets.push(this[0])//收集菜单容器里的所有href值，也就是滚动容器里的id值that.targets.push(this[1])
})
}
ScrollSpy.prototype.process = function () {//获取滚动容器的scrollTop，再加上设置的offset值var scrollTop = this.$scrollElement.scrollTop() + this.options.offset//获取滚动高度var scrollHeight = this.getScrollHeight()//最大滚动=总scrollheight + 设置的offset值 - 设置高度heightvar maxScroll = this.options.offset + scrollHeight - this.$scrollElement.height()var offsets = this.offsetsvar targets = this.targetsvar activeTarget = this.activeTargetvar iif (this.scrollHeight != scrollHeight) { this.refresh()
}//如果超过了最大滚动，说明已经滚动到底了if (scrollTop >= maxScroll) { //如果最后一个元素还没有高亮，则设置最后一个元素高亮 return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
}if (activeTarget && scrollTop < offsets[0]) { this.activeTarget = null return this.clear()
}//倒序遍历所有元素的offsetfor (i = offsets.length; i--;) { //如果i元素不等于当前高亮元素 activeTarget != targets[i]//滚动高度 大于 i元素的offsets&& scrollTop >= offsets[i]//i+1元素不存在，或者i+1元素大于滚动高度&& (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])//则设置i为高亮元素&& this.activate(targets[i])
}
} //设置高亮菜单元素
ScrollSpy.prototype.activate = function (target) {//赋值实例属性this.activeTarget = targetthis.clear()//查找菜单中符合[data-target+"#' + 所高亮元素的id + '"]属性的元素//或者href值是#' + 所高亮元素的id + '的话，也可以var selector = this.selector +
'[data-target="' + target + '"],' + this.selector + '[href="' + target + '"]'//查找父元素li，然后添加active高亮样式var active = $(selector)
.parents('li')
.addClass('active')//如果li元素的父元素有dropdown-menu样式，则表示是一个dropdown下拉菜单if (active.parent('.dropdown-menu').length) {
active = active
.closest('li.dropdown')//则需要给dropdown的li元素也加上active高亮样式.addClass('active')
}//触发自定义高亮事件active.trigger('activate.bs.scrollspy')
}
//删除其他高亮元素的active样式
ScrollSpy.prototype.clear = function () {
$(this.selector)
.parentsUntil(this.options.target, '.active')
.removeClass('active')
}
【4】jQuery plug-in definition
function Plugin(option) {//根据选择器，遍历所有符合规则的元素return this.each(function () { var $this = $(this) //获取自定义属性bs.scrollspy的值 var data = $this.data('bs.scrollspy') //如果option参数是对象，则作为ScrollSpy的参数传入 var options = typeof option == 'object' && option //如果值不存在，则将ScrollSpy实例设置为bs.scrollSpy值 if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options))) //如果option传递了string，则表示要执行某个方法 if (typeof option == 'string') data[option]()
})
} var old = $.fn.scrollspy //保留其他库的$.fn.scrollspy代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
$.fn.scrollspy = Plugin //重设插件构造器，可以通过该属性获取插件的真实类函数
$.fn.scrollspy.Constructor = ScrollSpy 【5】Anti-conflict processing
$.fn.scrollspy.noConflict = function () { //恢复以前的旧代码$.fn.scrollspy = old//将$.fn.scrollspy.noConflict()设置为Bootstrap的Scrollspy插件return this
}
【6】Binding trigger event
$(window).on('load.bs.scrollspy.data-api', function () {//遍历所有符合条件的滚动容器$('[data-spy="scroll"]').each(function () { var $spy = $(this) //执行scrollspy插件，并传入滚动容器上设置的自定义参数(data-开头) Plugin.call($spy, $spy.data())
})
})
The above is the detailed content of Implementation of scroll monitor function in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：ng2-validation learning of angular2Next article：ng2-validation learning of angular2
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills