bootstap 滚动监听_html/css_WEB-ITnose

程序员文章站 2022-06-08 23:46:08

...

---首先结合源代码介绍官网的说明

---然后总结了使用滚动监听的几个步骤

---最后给出一个简单的例子

---关键的一点：整体有点零散和乱七八糟，辛苦你的思维和眼睛了，呵呵

----------------------------------------------------------------------------------------------------------

1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

　　　　---- 使用滚动监听的话，导航栏必须采用 class="nav"的nav组件才可以：

　　　　下面是源代码中的一段，标红的部分可以证明这一点：

　　　　使用ScrollSpy的时候，需要采用

下必须有标签。

　注：另外我们需要把

 1 function ScrollSpy(element, options) { 2     this.$body          = $(document.body) 3     this.$scrollElement = $(element).is(document.body) ? $(window) : $(element) 4     this.options        = $.extend({}, ScrollSpy.DEFAULTS, options) 5     this.selector       = (this.options.target || '') + ' .nav li > a' 6     this.offsets        = [] 7     this.targets        = [] 8     this.activeTarget   = null 9     this.scrollHeight   = 010 11     this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))12     this.refresh()13     this.process()14   }

2. Navbar links must have resolvable id targets. For example, a home must correspond to something in the DOM like .

　　　　--- 简单的说，就是

下的标签必须有一个href="#id"属性，并且在滚动的内容里面，必须有对应的这样的标签；当内容滚动到标签时，对应的
的就会自动被选中。
　　　　--其实这一点做过Web开发的朋友都知道，在之前的HTML版本中，锚标记 通常采用这样的方式，但HTML5中的锚标记已经抛弃了name属性，而是采用id属性
```
 ScrollSpy.prototype.activate = function (target) {    this.activeTarget = target    this.clear()    var selector = this.selector +      '[data-target="' + target + '"],' +      this.selector + '[href="' + target + '"]'    var active = $(selector)      .parents('li')      .addClass('active')    if (active.parent('.dropdown-menu').length) {      active = active        .closest('li.dropdown')        .addClass('active')    }    active.trigger('activate.bs.scrollspy')  }
```
3. No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the . When scrollspying on elements other than the , be sure to have a height set and overflow-y: scroll; applied.

　　--- 如果监听Body的滚动，那么你必须给body添加position:relative样式

　　--- 如果监听的不是Body，而是其他得元素[貌似这种方式常见]，那么你需要添加三个样式：position:relative;height:500px;overflow-y:scroll;
```
ScrollSpy.prototype.refresh = function () {    var that          = this    var offsetMethod  = 'offset'    var offsetBase    = 0    this.offsets      = []    this.targets      = []    this.scrollHeight = this.getScrollHeight()    if (!$.isWindow(this.$scrollElement[0])) {      offsetMethod = 'position'      offsetBase   = this.$scrollElement.scrollTop()    }
```
4. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the ). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

　　--- 你需要给滚动内容的标签添加 data-spy="scroll"属性和data-target属性

　　　　data-spy 属性指明了被监听的元素，data-target属性指明滚动时需要控制的nav高亮显示

　　再看一次下面的初始化源代码，标红的位置，this.options.target的值，就等于滚动内容元素的data-target的值，看到这里，你或许已经想到，在定义.nav组件的时候，我们需要把.nav放在另一个容器内(比如div),且该容器需要有一个id属性（与这里data-target需要设置的值相同）。
```
function ScrollSpy(element, options) {    this.$body          = $(document.body)    this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)    this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)    this.selector       = (this.options.target || '') + ' .nav li > a'    this.offsets        = []    this.targets        = []    this.activeTarget   = null    this.scrollHeight   = 0    this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))    this.refresh()    this.process()  }
```
5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:
```
　　　　$('yourTag').scrollspy({ target: 'nav-parent-div-id' })
-- yourTag 就是要承载滚动内容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）


乱七八糟写了一堆，下面总结一个简单的几个步骤：
```
　　1. 添加标签
　　2. 在标签内添加.nav组件，并给li->a添加href="#tag"属性

　　3. 添加
;
　　4. 添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}

　　5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});

　最后来个小栗子：
```
         
                第一段            
                            第二段            
                            第三段            
        
```
```
　　第一段
　　　　　　第二段
　　　　　　第三段
　　　　
```
```
$(function () {    $('#body').scrollspy({ target: '#sc' });});
```
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章

相关视频
网友评论

文明上网理性发言，请遵守新闻评论服务协议
我要评论