Bootstrap每天必学之滚动监听_javascript技巧

本文为大家介绍Bootstrap滚动监听，供大家学习，具体内容如下

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

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

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

使用ScrollSpy的时候，需要采用

标签，并且在
• 下必须有标签。

  注：另外我们需要把

  标签放到另一个容器内(如div)，并给父容器添加一个id属性(这一点在第4节有介绍)

  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()
   }
  

  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' });
    });
    

    以上就是本文的全部内容，希望对大家的学习有所帮助。

    

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

    相关文章

    相关视频

    ---

    • javascript怎么将值类型强制转为字符串
    • javascript中什么是位运算符
    • 总结分享： 6 种JavaScript的打断点的方...
    • javascript怎么判断字符串是否是数字
    • Bootstrap每天必学之滚动监听_javasc...

    • Bootstrap 滚动监听
    • 滚动监听
    • 下载 Bootstrap
    • 在网页中使用 Bootstrap
    • 什么是BootStrap

    网友评论

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

    我要评论
  •