专栏首页cnblogsbootstrap源码分析之scrollspy(滚动侦听)

bootstrap源码分析之scrollspy(滚动侦听)

源码文件:

Scrollspy.js

实现功能

1、当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2、导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3、菜单上必须有.nav样式 4、滚动区域的data-target与导航父级Id(一定是父级)要一致

<div id="selector" class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li><a href="#one">one</a> </li>
        <li><a href="#two">two</a> </li>
        <li><a href="#three">three</a> </li>
    </ul>
</div>
<div data-spy="scroll" data-target="#selector" style="height:100px; overflow:hidden;overflow-y: auto;" >
    <h4 id="one" >ibe</h4><p>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/></p>
    <h4 id="two" >two</h4><p>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/></p>
    <h4 id="three" >three</h4><p>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/>One的具体内容<br/></p>
</div>

源码分析:

1、原理:当滚动容器内的hashkey位置距离容器顶部只有 offset设置的值,就会设置导航中对应的href高亮 2、如果滚动区域是body,会将滚动区域元素标记为window(构造函数中判断)

this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)

3、getScrolHeight:获取滚动容器的内容高度(包含被隐藏部分)

this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)

4、refresh:刷新并存储滚动容器内各hashkey的值

  4.1、默认用offset来获取定位值,如果滚动区域不是window则用position来获取

if (!$.isWindow(this.$scrollElement[0])) {
      offsetMethod = 'position'
      offsetBase   = this.$scrollElement.scrollTop() //获取基础高度,如果滚动区域内有不参与滚动计算的内容
   }

  4.2、根据导航上的hashkey来遍历获取 滚动区域内的hashkey对应的offset值:

this.$body
     .find(this.selector)
      .map(function () {
        var $el   = $(this)
        var href  = $el.data('target') || $el.attr('href')
        var $href = /^#./.test(href) && $(href) //获取滚动区域内的hashkey对应的元素

        return ($href
          && $href.length
          && $href.is(':visible')
          && [[$href[offsetMethod]().top + offsetBase, href]]) || null
      })
      .sort(function (a, b) { return a[0] - b[0] })
      .each(function () {
        that.offsets.push(this[0])
        that.targets.push(this[1])
      })

5、process:滚动条事件触发函数,用于计算当前需要高亮那个导航菜单

   5.1、获取滚动容器已滚动距离:

var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset

  5.2、滚动容器可以滚动的最大高度

//最大可以滚动高度=滚动设置距离(offset)+ 滚动容器内容高度 - 滚动容器设置的高度
var maxScroll    = this.options.offset + scrollHeight - this.$scrollElement.height()

   5.3、设置滚动元素逻辑:

for (i = offsets.length; i--;) {//遍历所有的offset
     activeTarget != targets[i] //判断当前target是否等于activeTarget
        && scrollTop >= offsets[i] //滚动高度>i元素的offset
        && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1]) //i + 1元素不存在,或者i+1元素不大于滚动高度
        && this.activate(targets[i]) //设置i为当前活动项
    }

6、active:设置指定的导航菜单高亮

7、clear:清除所有高亮菜单

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【留言板】可编辑输入框操作总结

    闲暇之余,用于加深自己对基础的了解,徒手撸了一个留言板:输入框。废话少说,进入正题。简陋的效果如下(下载代码): ? 一、定义需求 可输入文本,以及插入表情。 ...

    sam dragon
  • knockout源码分析之computed(依赖属性)

    一、序列图 ? 二、主要代码文件 1、dependentObservable.js:主要包含ko.computed相关方法的处理 2、dependencyDet...

    sam dragon
  • 对vue源码的初步认识和理解

          根据vue的官网介绍,可以得知vue是一个mvvm框架,且是响应式的。为了更深入了理解其内涵,本人以及理解实现了一个简单的mvvm学习的demo。下...

    sam dragon
  • Buffer cache 的调整与优化(二)

    Buffer cache 实际上细分为多个不同的Buffer cache,如keep pool,recycle pool,default pool,下面描述不...

    Leshami
  • Django之CURD插件

    CURD顾名思义就是create,update,rearch,delete(所谓的增删改查).

    菲宇
  • iOS开发之遍历Model类的属性并完善使用Runtime给Model类赋值

      在上篇博客《iOS开发之使用Runtime给Model类赋值》中介绍了如何使用运行时在实体类的基类中添加给实体类的属性赋值的方法,这个方法的前提是字典的Ke...

    lizelu
  • 100天搞定机器学习|Day8 逻辑回归的数学原理

    Day7,我们学习了K最近邻算法(k-NN),了解了其定义,如何工作,介绍了集中常用的距离和k值选择。Day8,作者转回之前的逻辑回归内容,推荐了Saishru...

    统计学家
  • 千万人的在线演唱会 ---大型直播平台让你转身【海量服务之道2.0】

    从Twitter到Twitter pic,再到Vine, 从Facebook到Instagram,再到Instagram短视频,从微信朋友圈图片到小视频,互联网...

    腾讯大讲堂
  • [nodejs] nodejs开发个人博客(五)分配数据

    陶士涵
  • C#中如何遍历datagridview表格控件中的每一个格子(每一个单元格)

     for (int i = 0; i < this.dgvHistoricDataMng.Rows.Count; i++)

    acoolgiser

扫码关注云+社区

领取腾讯云代金券