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

    最后来个小栗子：

    <style type="text/css">
        #body {
          position: relative;
          height: 500px;
          overflow-y: scroll;
        }
      </style>
    

    <div id="sc">
        <ul class="nav nav-pills">
          <li class="active">
            <a href="#A">第一段</a>
          </li>
          <li>
            <a href="#B">第二段</a>
          </li>
          <li>
            <a href="#C">第三段</a>
          </li>
        </ul>
    
      </div>
    
    

    <div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">
    
    　　<a id="A">第一段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    　　<a id="A">第二段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    　　<a id="A">第三段</a><br />
    
    　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
    
    </div>
    
    

    $(function () {
      $('#body').scrollspy({ target: '#sc' });
    });
    

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

    本站声明

    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）

2 周前 By 尊渡假赌尊渡假赌尊渡假赌

击败分裂小说需要多长时间？

1 个月前 By DDD

R.E.P.O.保存文件位置：在哪里以及如何保护它？

1 个月前 By DDD

R.E.P.O.最佳图形设置

2 周前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信条阴影：贝壳谜语解决方案

1 周前 By DDD

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7388

15

Java教程

1630

14

CakePHP 教程

1357

52

Laravel 教程

1267

25

PHP教程

1216

29

显示更多