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

    以上就是本文的全部內容，希望對大家的學習有所幫助。