Heim > Artikel > Web-Frontend > Implementierung der Scroll-Monitor-Funktion in Bootstrap
Implementierung der Scroll-Monitor-Funktion in Bootstrap
- 巴扎黑Original
- 2017-07-23 15:26:511312Durchsuche
Die vorherigen Wörter
Das Scroll-Listening-Plug-in wird verwendet, um Navigationselemente basierend auf der Position der Bildlaufleiste automatisch zu aktualisieren. Scrollen Sie durch den Bereich unterhalb der Navigationsleiste und achten Sie auf die Änderungen in den Navigationselementen. Die Elemente im Dropdown-Menü werden ebenfalls automatisch hervorgehoben. In diesem Artikel wird die grundlegende Verwendung des Bootstrap-Scroll-Monitors ausführlich vorgestellt
Das Scroll-Monitoring-Plug-in aktualisiert automatisch die entsprechenden Navigationselemente in der Navigationsleiste basierend auf dem Scrollposition. Das Plug-in kann automatisch erkennen, welche Position erreicht wurde, und dann einen aktiven Stil
zum übergeordneten Menüelement hinzufügen, das hervorgehoben werden muss, wenn in der Navigation ein Dropdown-Menü vorhanden ist , und der Inhalt des Bildlaufbereichs erreicht den Bereich, der dem untergeordneten Element des Dropdown-Menüs entspricht. Zusätzlich zur Hervorhebung des Untermenüs wird auch das übergeordnete Element des Untermenüs (Dropdown-Schaltfläche) hervorgehoben
Im täglichen Gebrauch Die Scroll-Überwachung wird im Allgemeinen auf zwei Arten verwendet: Zum einen wird die Höhe eines Elements festgelegt, und zum anderen wird das Scrollen der gesamten Seite (Hauptteil) überwacht. Die Verwendung beider Methoden ist gleich und beide erfordern die folgenden drei Schritte:
1. Stellen Sie den Scroll-Container ein, d. h. setzen Sie data-target="#selector" data-spy="scroll" ein das Element, das Sie überwachen möchten
2. Legen Sie den Menü-Link-Container fest. Die ID (oder der Stil) des Containers und der Selektor, der dem Datenzielattribut entspricht, müssen konsistent sein
3. Im Menücontainer muss ein Element im Navigationsstil vorhanden sein, und in seinem Inhalt ist ein Element li enthalten, das auch hervorgehobene Menülinks erkennen kann, die die Bedingungen von .nav li > erfüllen. ein Selektor
4 . Unabhängig von der Implementierungsmethode sind die Komponenten, die für die Scroll-Überwachung überwacht werden müssen, position: relative;, dh die relative Positionierung
[feste Elementhöhe]
<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>
[Körperelement]
<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>
JS-Aufruf
Im Bootstrap-Framework ist es relativ einfach, den Scroll-Monitor mithilfe von JavaScript-Methoden auszulösen. Sie müssen lediglich die Namen von zwei Containern angeben
<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>
Methode
Wenn Sie das Scroll-Listener-Plug-in zum Hinzufügen oder Löschen von Elementen im DOM verwenden, müssen Sie dies aufrufen Aktualisierungsmethode wie folgt
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})Es ist zu beachten, dass diese Aktualisierungsmethode nur für die deklarative Verwendung gültig ist. Wenn Sie den JS-Trigger verwenden und das DOM aktualisieren müssen, müssen Sie das Plug-in erneut anwenden oder die Instanz aus dem data-scrollspy-Attribut abrufen und dann die Aktualisierungsmethode
[Parameter] aufrufen;
Parameter können über Datenattribute oder JavaScript übergeben werden. Für das Datenattribut besteht der Name aus dem Parameternamen, der an die Rückseite von data- angehängt wird, z. B. data-offset=""
. Der Bildlaufmonitor stellt einen Offset-Parameter bereit, und der Standardwert dieses Parameters ist 10. Wenn sich der Bildlaufinhalt innerhalb von 10 Pixeln vom Bildlaufcontainer befindet, wird standardmäßig der entsprechende Menüpunkt hervorgehoben
[Ereignis]
Die Bildlaufüberwachung unterstützt auch Ereignisabonnements und Auslösefunktionen, derzeit nur Support ein Aktivierungsereignis
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-Quellcode
【1】IIFE
Verwenden Sie die Sofortaufruffunktion, um zu verhindern, dass der Code im Plug-In durchsickert, wodurch eine geschlossene Schleife entsteht, und kann nur über jQuerys fn erweitert werden
+function ($) {//使用es5严格模式'use strict';//}(window.jQuery);【2】Anfangseinstellungen
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-Kerncode
//获取滚动容器的滚动高度
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-Konflikt-Verarbeitung
$.fn.scrollspy.noConflict = function () { //恢复以前的旧代码$.fn.scrollspy = old//将$.fn.scrollspy.noConflict()设置为Bootstrap的Scrollspy插件return this
}【6】Bind-Trigger-Ereignis
$(window).on('load.bs.scrollspy.data-api', function () {//遍历所有符合条件的滚动容器$('[data-spy="scroll"]').each(function () { var $spy = $(this) //执行scrollspy插件，并传入滚动容器上设置的自定义参数(data-开头) Plugin.call($spy, $spy.data())
})
})
Das obige ist der detaillierte Inhalt vonImplementierung der Scroll-Monitor-Funktion in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse